How can I assign colors to pixels in a HTML5 canvas using JavaScript?

Question

What I've been trying to do is to assign pixels colours based on their coordinates. I've done something but I'm quite new to this and I'm not sure why it doesn't work.

var canvas = document.getElementById("plane");
var context = canvas.getContext("2d");

// parameters of the plance - should be editable
var width = canvas.width;
var height = canvas.heigth;
var x;
var y;
var color;

var imagedata = context.createImageData(width, height);

function createImage(offset) 
{
    for (x = 0; x < width; x += 1) 
    {
        for (y = 0; y < height; y += 1) 
        {
            if (x < width / 3) 
                color = {r: 256, g: 0, b: 0};

            else if (x < width / 2)
                color = {r: 0, g: 256, b: 0};

            else if (x < width)
                color = {r: 0, g: 0, b: 256};

            var pixelindex = (y * width + x) * 4;
            imagedata.data[pixelindex] = color.r;
            imagedata.data[pixelindex + 1] = color.g;
            imagedata.data[pixelindex + 2] = color.b;            
            imagedata.data[pixelindex + 3] = 255;
        }
    }
}

context.putImageData(imagedata, 0, 0);

I created the HTML separately.

<html>
<head>
<meta charset="utf-8">
    <title>
    Something
    </title>

    <script type="text/javascript" src="something.js"></script>        

</head>
    <body>        
       <canvas id="plane" width="640" height="480"></canvas>
    </body>
</html>

Thank you for your help.

ASDFGerte · Answer 1 · 2017-01-14T17:47:32.867

All you did wrong is a typo in var height = canvas.heigth;, see "heigth", should be "height" and you forgot to call createImage(0);. That the image is not split evenly in three parts is because your math of width / 3, width / 2 and width just is not an even split, mathematically.

Corrected version if needed:

var canvas = document.getElementById("plane");
var context = canvas.getContext("2d");

// parameters of the plance - should be editable
var width = canvas.width;
var height = canvas.height;
var x;
var y;
var color;

var imagedata = context.createImageData(width, height);

function createImage(offset) {
for (x = 0; x < width; x += 1) {
    for (y = 0; y < height; y += 1) {
        if (x < width / 3) {
            color = {r: 256, g: 0, b: 0};
        } else if (x < 2* width / 3) {
            color = {r: 0, g: 256, b: 0};
        } else if (x < width) {
            color = {r: 0, g: 0, b: 256};
        }

    var pixelindex = (y * width + x) * 4;
    imagedata.data[pixelindex] = color.r;
    imagedata.data[pixelindex + 1] = color.g;
    imagedata.data[pixelindex + 2] = color.b;            
    imagedata.data[pixelindex + 3] = 255;
        }
}
}

createImage(0)

context.putImageData(imagedata, 0, 0);

<html>
  <head>
    <meta charset="utf-8">
    <title>
      Something
    </title>
  </head>
  <body>
    <canvas id="plane" width="640" height="480"></canvas>
  </body>
</html>

On the side, you could also use fillRect or other canvas features (green grid as example):

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
for (let w = 0; w < canvas.width; w++) {
  for (let h = 0; h < canvas.height; h++) {
    if ((w + h) % 2 === 0)
      ctx.fillRect(w, h, 1, 1);
  }
}

<html>
  <body>
    <canvas id="canvas" width="180" height="120">
      your browswer does not support canvas
    </canvas>
  </body>
</html>

Thanks, but it still doesn't work when I open the HTML file in Google Chrome (I used Brackets to code it). I know that the code is good now because it runs perfectly on JS Bin, why is the page blank when I simply open it? — M. Bailey, Jan 14 '17 at 16:58
You are loading the script in the head and the canvas in the body (after the script). Using the console, you should see the issue (`canvas is null`, cntrl+shift+J in chrome, cntrl+shift+K in FF). On here the script import on the html is irrelevant, it just loads the script provided after the html, therefore it works (similar on JS Bin probably). — ASDFGerte, Jan 14 '17 at 17:41
Starting scripts **after** DOM has finished loading is a common issue/practice, see for example [here](http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) (or many many other places where methods to do this are described - some even built into libraries) — ASDFGerte, Jan 14 '17 at 17:49
It works now thank you. One last question, why is the pixelindex (y*width+x)*4? What does that represent why is this the formula? I sort of saw it somewhere and decided to use it but I'm not quite sure what it does. I tried to mess with it like multiplying by 5 instead of 4 and I got a completely different image. — M. Bailey, Jan 15 '17 at 11:20
See [pixel manipulation with canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas) — ASDFGerte, Jan 16 '17 at 01:50

How can I assign colors to pixels in a HTML5 canvas using JavaScript?

1 Answers1