javascript - Optimal pixel drawing speed? -
I am using a canvas object with javascript. Just to do some tests to see how fast I can set the pixel in the Dre loop.
On Mac, it works very well in FF, Safari, Chrome. On the windows, I get the effect of flicker on FF and chrome. It seems that the canvas implementation on windows is different from Mac for different browsers? (Make sure if this is not true).
This is the original code I am using for drawing (taken from the article below - I have customized the bottom to tighten the draw loop, it looks beautiful now it is sleek) :
var canvas = document.getElementById ('myCanvasElt'); Var ctx = canvas.getContext ('2d'); Var canvas data = ctx.getImageData (0, 0, canvas.wind, canvas.height); (Var x = 0; x & lt; canvasData.width; x ++) {for (var y = 0; y & lt; canvasData.height; y ++) {// array var idx = (x + y Pixel index) * canvas Wide) * 4; CanvasData.data [idx + 0] = 0; Canvas data data [IDX + 1] = 255; Canvas data data [IDX + 2] = 0; Canvas data data [IDX + 3] = 255; }} Ctx.putImageData (canvasadata, 0, 0);
Again, the branches will flick a little over the windows. It seems that the canvas implementation is trying to whitewash the canvas before the next drawing operation (it does not happen on the Mac). I'm wondering if there is a setting that I can change in that canvas object to modify that value (double-buffering, clear before drawing, etc.)?
This article is being used as reference:
thanks
The problem is in the manner in which browsers have used the basic graphics APIs on separate OS and even on the same OS, for various APIs (e.g. GDI vs. Direct 2D in Windows) Experiments will also give different results.
Comments
Post a Comment