Databases
StackOverflow2013
Postsdbo
POWhy does Canvas's putImageData not work when I specify target location?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does Canvas's putImageData not work when I specify target location?
    text
    copied!<p>In trying to find documentation for Canvas context's putImageData() method, I've found things like this:</p> <p>context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);</p> <p>(from <a href="http://www.w3schools.com/tags/canvas_putimagedata.asp" rel="nofollow noreferrer">http://www.w3schools.com/tags/canvas_putimagedata.asp</a>)</p> <p>According to the documentation I've read, x and y are an index into the <em>source</em> image, whereas dirtyX and dirtyY specify coordinates in the target canvas where to draw the image. Yet, as you'll see from the example below (and JSFiddle) a call to putImageData(imgData,x,y) works while putImageData(imgData, 0, 0, locX, locY) doesn't. I'm not sure why.</p> <p><strong>EDIT:</strong></p> <p>I guess my real question is why the top row of the image is black, and there are only 7 rows, not 8. The images should start at the top-left of the Canvas. They DO start at the left (and have 8 columns). Why do they not start at the top?</p> <p><strong>Answer:</strong> that's due to divide by 0 on this line when yLoc is 0:</p> <pre><code>xoff = imgWidth / (yLoc/3); </code></pre> <p><strong>The JSFiddle:</strong></p> <p><a href="http://jsfiddle.net/WZynM/" rel="nofollow noreferrer">http://jsfiddle.net/WZynM/</a></p> <p><strong>Code:</strong></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Canvas tutorial&lt;/title&gt; &lt;script type="text/javascript"&gt; var canvas; var context; // The canvas's 2d context function setupCanvas() { canvas = document.getElementById('myCanvas'); if (canvas.getContext) { context = canvas.getContext('2d'); context.fillStyle = "black"; // this is default anyway context.fillRect(0, 0, canvas.width, canvas.height); } } function init() { loadImages(); startGating(); } var images = new Array(); var gatingTimer; var curIndex, imgWidth=0, imgHeight; // Load images function loadImages() { for (n = 1; n &lt;= 16; n++) { images[n] = new Image(); images[n].src = "qxsImages/frame" + n + ".png"; // document.body.appendChild(images[n]); console.log("width = " + images[n].width + ", height = " + images[n].height); } curIndex = 1; imgWidth = images[1].width; imgHeight = images[1].height; } function redrawImages() { if (imgWidth == 0) return; curIndex++; if (curIndex &gt; 16) curIndex = 1; // To do later: use images[1].width and .height to layout based on image size for (var x=0; x&lt;8; x++) { for (var y=0; y&lt;8; y++) { //if (x != 1) // context.drawImage(images[curIndex], x*150, y*100); // context.drawImage(images[curIndex], x*150, y*100, imgWidth/2, imgHeight/2); // scale // else self.drawCustomImage(x*150, y*100); } } } function drawCustomImage(xLoc, yLoc) { // create a new pixel array imageData = context.createImageData(imgWidth, imgHeight); pos = 0; // index position into imagedata array xoff = imgWidth / (yLoc/3); // offsets to "center" yoff = imgHeight / 3; for (y = 0; y &lt; imgHeight; y++) { for (x = 0; x &lt; imgWidth; x++) { // calculate sine based on distance x2 = x - xoff; y2 = y - yoff; d = Math.sqrt(x2*x2 + y2*y2); t = Math.sin(d/6.0); // calculate RGB values based on sine r = t * 200; g = 125 + t * 80; b = 235 + t * 20; // set red, green, blue, and alpha: imageData.data[pos++] = Math.max(0,Math.min(255, r)); imageData.data[pos++] = Math.max(0,Math.min(255, g)); imageData.data[pos++] = Math.max(0,Math.min(255, b)); imageData.data[pos++] = 255; // opaque alpha } } // copy the image data back onto the canvas context.putImageData(imageData, xLoc, yLoc); // Works... kinda // context.putImageData(imageData, 0, 0, xLoc, yLoc, imgWidth, imgHeight); // Doesn't work. Why? } function startGating() { gatingTimer = setInterval(redrawImages, 1000/25); // start gating } function stopGating() { clearInterval(gatingTimer); } &lt;/script&gt; &lt;style type="text/css"&gt; canvas { border: 1px solid black; } &lt;/style&gt; &lt;/head&gt; &lt;body onload="setupCanvas(); init();"&gt; &lt;canvas id="myCanvas" width="1200" height="800"&gt;&lt;/canvas&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><a href="http://jsfiddle.net/WZynM/" rel="nofollow noreferrer">http://jsfiddle.net/WZynM/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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