Javascript canvas examples

Examples, how to use a canvas object.

Javascript canvas example I.

Frame (empty rectangle)

<html>
<head>
</head>
<body >
<canvas id="canvas" width="200" height="100"></canvas>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, 199, 99);

ctx.lineWidth=5;
ctx.strokeStyle = 'rgb(0,0,199)';
ctx.strokeRect(14, 14, 185, 85); 
}
}
draw();
</script>

</body>
</html>

Javascript canvas example Ia.

Two filled rectangles, second 50% transparent:

<html>
<head>
</head>
<body >
<canvas id="canvas" width="200" height="100"></canvas>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);

ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50); 
}
}
draw();
</script>

</body>
</html>

Javascript canvas example II.

Function to paste an image from a file:

<html>
<head>
</head>
<body >
<canvas id="canvas" width="320" height="200"></canvas>
<script type="application/javascript">

function draw() {
var img = new Image();   // Create new img element
img.src = 'bears.jpg';   // Set source path

var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, 319, 199);
ctx.drawImage(img, 0, 0, 319, 199);

}
}
draw();
</script>
<br>Please, click "reload" (possibly F5).
</body>
</html>

Javascript canvas example IIa.

If work with images, beware of async loading. Script must wait for image to be loaded, because the main web page is loaded and all the script is run before loading and displaying images started:

<html>
<head>
</head>
<body >
<canvas id="canvas" width="320" height="200"></canvas>
<script type="application/javascript">

var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, 319, 199);

var im1 = new Image();    //prepare image
im1.src = "bears.jpg";
// image has content after loading. It is not possible
// to use it before it is loaded ... wait for it
im1.addEventListener("load", (e) => {
  ctx.drawImage(im1, 0, 0, 200, 100);
// any drawing must be done after the "load" event:
ctx.lineWidth=3;
ctx.strokeStyle = 'rgb(255,127,0)';
ctx.strokeRect(33, 33, 253, 133);  
});

// this will be overwritten by later loading of the image
ctx.lineWidth=5;
ctx.strokeStyle = 'rgb(0,0,199)';
ctx.strokeRect(14, 14, 305, 185); 
}

</script>


</body>
</html>

Javascript canvas example III.

Text output:

<html>
<head>
</head>
<body >
<canvas id="canvas" width="400" height="50"></canvas>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, 399, 49);

ctx.fillStyle = 'rgb(128, 128, 128)';
ctx.font="bold 20px Arial";
ctx.fillText("Testing...",13, 34);

ctx.fillStyle = 'rgb(33, 55, 255)';
ctx.font="bold 20px Arial";
ctx.fillText("Testing...",10, 31);
}
}
draw();
</script>

</body>
</html>

Javascript canvas example V.

Drawing a rectangle where cliking by mouse:

<html>
<head>
</head>
<body >
<canvas id="canvas" width="200" height="100"></canvas>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, 199, 99);

ctx.lineWidth=5;
ctx.strokeStyle = 'rgb(0,0,199)';
ctx.strokeRect(14, 14, 200-28, 100-28); 
}
}
draw();

function windowToCanvas(canvas, x, y) {
   var bbox = canvas.getBoundingClientRect();

   return { x: x - bbox.left * (canvas.width  / bbox.width),
            y: y - bbox.top  * (canvas.height / bbox.height)
          };
}

canvas.onmousedown = function (e) {
   var loc = windowToCanvas(canvas, e.clientX, e.clientY);

   var ctx = canvas.getContext('2d');
   ctx.strokeRect(loc.x-10, loc.y-10,20,20);
};
</script>

</body>
</html>

Javascript canvas example VI.

Drawing a line by mouse - requires remember if the button is down:

<html>
<head>
</head>
<body >
<canvas id="canvas" width="500" height="300"></canvas>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, 500, 300);

ctx.lineWidth=5;
ctx.strokeStyle = 'rgb(0,0,199)';
ctx.strokeRect(14, 14, 500-28, 300-28); 
}
}
draw();

function windowToCanvas(canvas, x, y) {
   var bbox = canvas.getBoundingClientRect();

   return { x: x - bbox.left * (canvas.width  / bbox.width),
            y: y - bbox.top  * (canvas.height / bbox.height)
          };
}
var img = new Image();   // Create new img element
img.src = 'dot.gif';     // Set source path
var isdown = 0;       // Memory, if mouse button is pressed

canvas.onmousedown = function (e) {
   isdown = 1;
   var loc = windowToCanvas(canvas, e.clientX, e.clientY);

   var ctx = canvas.getContext('2d');
   ctx.drawImage(img, loc.x-4, loc.y-4, 9, 9);
};
canvas.onmouseup = function (e) {
   isdown = 0;
};

canvas.onmousemove = function (e) {
   var loc = windowToCanvas(canvas, e.clientX, e.clientY);
   
   var ctx = canvas.getContext('2d');
   if(isdown == 1) {
    // left click
  ctx.drawImage(img, loc.x-4, loc.y-4, 9, 9);}
};
</script>

</body>
</html>

Javascript canvas example VII.

Draw a color line.

Let's have images , , , , and .

<html>
<head>
</head>
<body >
<canvas id="canvas"
 width="500" height="300"></canvas>

<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, 500, 300);

ctx.lineWidth=5;
ctx.strokeStyle = 'rgb(0,0,199)';
ctx.strokeRect(14, 14, 500-28, 300-28); 
}
}
draw();

function windowToCanvas(canvas, x, y) {
   var bbox = canvas.getBoundingClientRect();

   return { x: x - bbox.left * (canvas.width  / bbox.width),
            y: y - bbox.top  * (canvas.height / bbox.height)
          };
}
var img = new Image();   // Create new img element
img.src = 'dot.gif';     // Set source path
var isdown = 0;       // Memory, if mouse button is pressed
var colorset = 2;     // blue

canvas.onmousedown = function (e) {
   isdown = 1;
};
canvas.onmouseup = function (e) {
   isdown = 0;
};

canvas.onmousemove = function (e) {
   var loc = windowToCanvas(canvas, e.clientX, e.clientY);
   
   var ctx = canvas.getContext('2d');
   switch(colorset) {
    case 1:
        ctx.fillStyle = 'rgb(255, 0, 0)';
        break;
    case 2:
        ctx.fillStyle = 'rgb(0, 0, 255)';
        break;
    case 3:
        ctx.fillStyle = 'rgb(0, 155, 0)';
        break;
    case 4:
        ctx.fillStyle = 'rgb(0, 155, 255)';
        break;
    case 6:
        ctx.fillStyle = 'rgb(255, 199, 0)';
        break;
    default:
        ctx.fillStyle = 'rgb(0, 0, 0)';
} 
   if(isdown == 1) {
    // left mouse button is down
  ctx.fillRect(loc.x-3, loc.y-3, 7, 7);}
};

function setred() {
  colorset = 1 ;
};
function setblue() {
  colorset = 2 ;
};
function setgreen() {
  colorset = 3 ;
};
function setcyan() {
  colorset = 4 ;
};
function setblack() {
  colorset = 5 ;
};
function setyellow() {
  colorset = 6 ;
};
</script>

<br><br>
<img src="reddot.png" onclick="setred()"> 
<img src="bluedot.png" onclick="setblue()"> 
<img src="greendot.png" onclick="setgreen()"> 
<img src="blackdot.png" onclick="setblack()"> 
<img src="yellowdot.png" onclick="setyellow()"> 
<img src="cyandot.png" onclick="setcyan()"> 


</body>
</html>

Next examples would be even longer. Try to construct your own program.