Introduction

In HTML5, we can draw on the screen using canvas feature in HTML5, in this page we'll be covering the assignments for our CGA class in the first week. Let's dive right in to the answers. I'm not really sure whether we should use self created functions in this assignment or starting in programming assignments only so I've decided to use default library from HTML5. The code for this page is also available at my github repository if you're considering to check it out, please do.

How to display a screen (canvas) in HTML5

To use canvas in HTML5, here's a few step by step:

1. Type in <canvas id="myCanvas" width="200" height="200">Canvas not supported by this browser.</canvas> on the body of your html document. Result as seen below.
2. (Optional) To color the background of the canvas you'll need to use a little bit of CSS.

Canvas not supported by this browser.

The resolution of the screen (canvas) in HTML5

The resolution of this canvas is as can be seen in the code <canvas id="myCanvas" width="200" height="200">Canvas not supported by this browser.</canvas> is width = 200 and height = 200.

Canvas not supported by this browser.

Number of colors that can be displayed on the screen (canvas) in HTML5

HTML color codes are hexadecimal triplets representing the colors red, green, and blue (#RRGGBB) each of which can be the range of:

0 to 255 (in decimal)

00 to FF (in hexadecimal)

Because each of the three colors can have values from 0 to 255 (256 possible values), there are: 256 × 256 × 256 = 256³ = 16,777,216 possible color combinations

COLOR PICKER

How to display a dot at a certain coordinate on the screen (canvas) in HTML5

Now we will attempt to create a dot in the center of the canvas which will be on the coordinate of 100, 100 and follow this step by step:

1. Type in <canvas id="myCanvas" width="200" height="200">Canvas not supported by this browser.</canvas> on the body of your html document.
2. Create a javascript script tag in your html document.
3. Type in these functions in the script tag.

   function setPixel(imageData, x, y, r=0, g=0, b=0, a=255){
    index = (x + y * imageData.width) * 4;
    imageData.data[index + 0] = r;
    imageData.data[index + 1] = g;
    imageData.data[index + 2] = b;
    imageData.data[index + 3] = a;
   }
   function drawPixel(canvas, x, y, r=0, g=0, b=0, a=255){
    var w = canvas.width;
    var h = canvas.height;
    context = canvas.getContext("2d");
    var imageData = context.getImageData(0, 0, w, h);
    setPixel(imageData, x, y);
    context.putImageData(imageData, 0, 0);
   }

4. Then type in these execution code

   window.onload=function(){
    var canvas = document.getElementById("myCanvas");
    drawPixel(canvas, 100, 100);
   }

   in the script tag.
5. As you can see in the script we changed the pixel color to black (r = 0, g = 0, b = 0) on coordinate 100, 100.
6. Voila! (you need to zoom in to see the pixel 'coz it's really small).

Canvas not supported by this browser.

How to draw a line on the screen (canvas) in HTML5

Now we will attempt to create a line in the canvas which will be kinda similar which creating a dot in the canvas, follow this step by step:

1. Type in <canvas id="myCanvas" width="200" height="200">Canvas not supported by this browser.</canvas> on the body of your html document.
2. Add in these functions in to the script tag with existing codes.

   function drawLine(canvas, x1, y1, x2, y2, r=0, g=0, b=0, a=255){
    var w = canvas.width;
    var h = canvas.height;
    context = canvas.getContext("2d");
    var imageData = context.getImageData(0, 0, w, h);
   
    // y = mx + c
   
    //Bresenham's Algorithm
    var dx = Math.abs(x2 - x1);
    var sx = x1 < x2 ? 1 : -1;
    var dy = Math.abs(y2 - y1);
    var sy = y1 < y2 ? 1 : -1;
    var err = (dx > dy ? dx : -dy)/2;
    while (true) {
     drawPixel(canvas, x1, y1);
     if (x1 === x2 && y1 === y2) break;
     var e2 = err;
     if (e2 > -dx) { err -= dy; x1 += sx; }
     if (e2 < dy) { err += dx; y1 += sy; }
    }
   }

3. Then type in these execution code

   window.onload=function(){
    var canvas = document.getElementById("myCanvas");
    drawLine(canvas, 10, 10, 190, 190);
   }

   in the script tag inside window.onload=function if it already exists.
4. As you can see in the script we will create a line starting from coordinate 10, 10 until 190, 190.

Canvas not supported by this browser.

Program to draw as given in the assignment

This time we will solve the program assignment given in this task, follow this step by step:

1. Type in <canvas id="myCanvas" width="200" height="200">Canvas not supported by this browser.</canvas> on the body of your html document.
2. Type in

   window.onload=function(){
    var canvas = document.getElementById("myCanvas");
    drawLine(canvas, 50, 100, 50, 50);
    drawLine(canvas, 50, 50, 100, 50);
    drawLine(canvas, 100, 50, 100, 100);
    drawLine(canvas, 100, 100, 50, 100);
   
    drawPixel(canvas, 75, 75);
   }

   in the script tag inside window.onload=function if it already exists.
3. As you can probably see, in the script we created a rectangle with lines starting from 50, 100 continuing to 50, 50 then 100, 50 then 100, 100 and finally returning to the starting point 50, 100 also we added a point/pixel at the center of the rectangle specifically at 75, 75.

Canvas not supported by this browser.

Demo

draw pixel

x: y: draw

width:200 height:200

draw line

x1: y1:
x2: y2: draw

width:200 height:200