Problems with imagedata

CS Principles Website and Tools Questions
21

I tested the above code here :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Code.org setRGB speed test</title>
</head>
<body onload="draw();">
<canvas width="1920" height="1080" id="canvas1">Sorry, but your browser doesn't appear to support the canvas element</canvas>
<script>
"use strict";
function draw() {
console.time("Time1");
var inexact = 0;
var canvas = document.getElementById('canvas1');
//var width = 320;
//var height = 450;
var width = 320;
var height = 450;
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, width, height);
//var width = canvas.width;
//var height = canvas.height;
var canvasImage = ctx.getImageData(0, 0, width, height);

function setRGB(imageData, x1, y1, r, g, b, a) {
  var t2 = (x1 - Math.floor(x1)) + (y1 - Math.floor(y1)) + (r - Math.floor(r)) +(g - Math.floor(g)) + (b - Math.floor(b)) + (a - Math.floor(a));
  var x2;
  var y2;
  var r2;
  var g2;
  var b2;
  var a2;
  if ( t2 != 0 ) {
    //console.log("Warning : Non-integer parameter detected -- rounding");
    inexact = 1;
    x2 = Math.round(x1);
    y2 = Math.round(y1);
    r2 = Math.round(r);
    g2 = Math.round(g);
    b2 = Math.round(b);
    a2 = Math.round(a);
  }
  else {
    x2 = x1;
    y2 = y1;
    r2 = r;
    g2 = g;
    b2 = b;
    a2 = a;
  } 
  var t1 = y2*width*4 + x2*4;
  imageData.data[t1] = r2;
  imageData.data[t1 + 1] = g2;
  imageData.data[t1 + 2] = b2;
  imageData.data[t1 + 3] = a2;
 }

  for (var y = 0; y < 450; y++) {
    for (var x = 0; x < 320; x++) {
      //var r = Math.round(Math.random()*255);
      //var g = Math.round(Math.random()*255);
      //var b = Math.round(Math.random()*255);
      var r = Math.floor(Math.random()*256);
      var g = Math.floor(Math.random()*256);
      var b = Math.floor(Math.random()*256);
      //var r = Math.random()*255;
      //var g = Math.random()*255;
      //var b = Math.random()*255;
      setRGB(canvasImage, x, y, r, g, b, 255);
    }
    ctx.putImageData(canvasImage, 0, 0, r, g, b, 255);
  }
  if (inexact != 0) {
    console.log("Warning : setRGB() called with non-integer parameters -- rounding");
  }
  console.timeEnd("Time1");
}
</script>
</body>
</html>

with Code dot org’s setRGB() function, it takes at least 10 seconds to call setRGB() on each pixel in the App Lab’s 320x450 canvas. With the above code, it only takes around 100 milliseconds, which makes it about 100 times faster, at least.

In addition, the code fails gracefully and outputs a warning of non-integer parameters to the console.

jdb2