Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You're receiving the <code>INDEX_SIZE_ERR</code> because you are calling <code>drawImage()</code> with parameters that are either negative or are outside the bounds of your data. In this case, we can rule out negative values.</p> <p>Instead, you are probably seeing the error because you're asking for information outside the dimensions of your source image data. When you specify both the source and destination coordinates and dimensions (as you are doing here), you <em>are</em> allowed to pass values outside the bounds of the destination dimensions (both positive and negative). Where you can run into trouble is with the source values.</p> <p>In your case, I think what's happening is that your source image is actually not <code>300px by 227px</code>, despite what you denote in the CSS. Even though the image may be displayed that large in your browser, the actual number of pixels stored in the image object that's loaded into the DOM is smaller. So, even though your call to <code>drawImage()</code> has valid parameters given the sizing you specified for each DOM element, you are asking for pixels <code>33 -&gt; 137</code> in the <code>x</code> dimension and pixels <code>71 -&gt; 195</code> in the <code>y</code> dimension. One (or both) of these ranges exceeds the dimensions of your source image. Double check the actual size of your source image.</p> <p>As for why you're experiencing different behavior between local and network execution, you're probably running into issues when the images are requested. Aside from the fact that you typically won't be able to manipulate canvas elements locally (unless you setup a special dev environment or manually configure your browser), images still have to be "downloaded" to your browser regardless of their location. Image acquisition in a browser is done asynchronously, so given the code you have now you cannot be guaranteed when the <code>draw()</code> function is called that both (or either) of the images are available in memory.</p> <p>Instead, what you should be doing is using the <code>onload</code> callback function built into image elements. In your case, since you have two images, you would need to maintain a flag to determine when both images are loaded. You might try something like this:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="application/x-javascript"&gt; var images_loaded = 0; function imageLoaded() { ++images_loaded; if (images_loaded == 2) { draw(); } } function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.drawImage(document.getElementById('frame'),0,0); ctx.drawImage(document.getElementById('source'),33,71,104,124,21,20,87,104); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt; &lt;img id="source" onload="imageLoaded();" src="images/rhino.jpg" width="300" height="227" alt=""&gt; &lt;img id="frame" onload="imageLoaded();" src="images/picture_frame.png" width="132" height="150" alt=""&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Note that the issue with your parameters in the call to <code>drawImage()</code> for the rhino still remains in the above example; I don't know what the dimensions of your rhino.jpg image are, so I can't recommend a correction.</p>
    singulars
    1. This table or related slice is empty.
    1. POCanvas drawImage throws INDEX_SIZE_ERR when run locally, but not from the web
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USXenethyl
    1. USXenethyl
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POCanvas drawImage throws INDEX_SIZE_ERR when run locally, but not from the web
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIt was indeed the picture size that was the issue. The load was occurring just fine. Thanks so much for your help, this has been great for learning about the mechanics of the loading model and debuggers.
      singulars
      1. PO
      1. USJoe Zoller
    2. CO@JoeZoller No problem! I'm glad we were able to sort the problem out. :)
      singulars
      1. PO
      1. USXenethyl
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload