This was narrowed down from a much larger script, but you can see that drawing a gradient based on the x value takes much more time than just passing it value 255.
Why should this matter? In either case, they are both drawing one pixel at a time, and they are both doing the work to derive the value of x.
By the way, my goal is not to find a faster way of drawing gradients.
var canvas = document.getElementById('canvas')
canvas.width = 600
canvas.height = 600
var ctx = canvas.getContext('2d')
init();
function init()
{
requestAnimationFrame(draw)
}
function draw()
{
const t0 = performance.now();
for(x = 0; x < canvas.width; x++)
{
for(y = 0; y < canvas.height; y++)
{
setPixelWhiteColor(x,x,y)
//setPixelWhiteColor(255,x,y) // <- faster?
}
}
const t1 = performance.now();
document.getElementById("debug1").innerHTML = t1 - t0
requestAnimationFrame(draw)
}
function setPixelWhiteColor(w,x,y)
{
ctx.fillStyle = "rgb("+w+","+w+","+w+")";
ctx.fillRect( x, y, 1, 1 );
}<canvas id="canvas"></canvas>
<div id="debug1"></div>I had to work with raw image data using putImageData like Wiktor said:
var canvas = document.getElementById('canvas')
canvas.width = 600
canvas.height = 600
var ctx = canvas.getContext('2d')
var id = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = id.data;
init();
function init()
{
requestAnimationFrame(draw)
}
function draw()
{
const t0 = performance.now();
for(x = 0; x < canvas.width; x++)
{
for(y = 0; y < canvas.height; y++)
{
var w = x
if(w > 255){
w = 255
}
setPixelWhiteColor(w,x,y)
}
}
putImageData()
const t1 = performance.now();
document.getElementById("debug1").innerHTML = t1 - t0
requestAnimationFrame(draw)
}
function setPixelWhiteColor(w,x,y)
{
var r = w
var g = w
var b = w
var off = (y * id.width + x) * 4;
pixels[off] = r;
pixels[off + 1] = g;
pixels[off + 2] = b;
pixels[off + 3] = 255;
}
function putImageData(){
ctx.putImageData(id, 0, 0);
}<html>
<body>
<canvas id="canvas"></canvas>
<div id="debug1"></div>
<div id="debug2"></div>
<script>
</script>
</body>
</html>