html canvas tutorial code example

Example 1: javascript create canvas

var canvas = document.createElement("canvas"); //Create canvas
document.body.appendChild(canvas); //Add it as a child of <body>

Example 2: canvas tag html

//HTML
<canvas id="canv"></canvas>

//Javascript
var canvas = document.getElementById("canv");
canvas.width = canvas.height = 100;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 80, 80);

Example 3: canvas in javascript

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

Example 4: html5 canvas

<canvas id="" width="" height=""></canvas>
<script>
	
</script>

Tags:

Html Example

Related