Javascript canvas examples

Javascript canvas example I.

<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 II.

<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 III.

<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 IV.

<html>
<head>
</head>
<body >
<canvas id="canvas" width="150" height="150"></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 IVa.

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="200" height="100"></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, 199, 99);

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, 133, 33);  
  
});
// this will be overwritten by later loading of the image
ctx.lineWidth=5;
ctx.strokeStyle = 'rgb(0,0,199)';
ctx.strokeRect(14, 14, 185, 85); 
}

</script>


</body>
</html>

Javascript canvas example V.

<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.

<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.

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.