Evangelism/Firefox3.5/35Days/Articles/createImageData: Difference between revisions

Evangelism/Firefox3.5/35Days/Articles/createImageData (view source)

203 bytes removed , 5 June 2009

canmove, Confirmed users

1,577

edits

@@ Line 82: / Line 82: @@
 ==== Update the canvas ====
-Now that you've got a set of pixels updated you can use a simple call to update the canvas with the new values:
+Now that you've got a set of pixels updated you can use the simple putImageData() call.  This call takes the ''canvasData'' object and the x,y location where you would like to draw the rectangle of pixel data into the canvas:
   var canvas = document.getElementById('myCanvasElt');
   var ctx = canvas.getContext('2d');
-  var canvasData = ctx.pubImageData(canvasData, 0, 0);
+  var canvasData = ctx.putImageData(canvasData, 0, 0);
-Ok, now, you know how to create a matrix. But if you change the values, they will not be applied to the canvas directly, you have to push the matrix to the canvas. That can be done via the ''putImageData'' method, which takes 3 arguments: ''ImageData'', x, y (coordinates of where in the canvas to put the matrix).
 === Examples ===