CODEWITHSUNDEEP
javascripthtmlcanvas
M. Bailey
M. Bailey

Reputation: 21

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

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.

Upvotes: 0

Views: 86

Answers (1)

ASDFGerte
ASDFGerte

Reputation: 5193

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>

Upvotes: 2

Related Questions