Check out example codes for "html5 canvas". It will help you in understanding the concepts better.

Code Example 1

<canvas id="myCanvas" width="200" height="100"></canvas>

Code Example 2

<!-- Answer to: "html canvas tutorial" -->

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
// Get the element:
var canvas = document.getElementById("myCanvas");
// Create 2D object:
var ctx = canvas.getContext("2d");
// Change the colour to red (#ff0000):
ctx.fillStyle = "#FF0000";
// Make the position of the object (ctx) at (0, 0) and give
// it the height of 75px and the width of 150px:
ctx.fillRect(0,0,150,75);
</script>

<!-- For information, check the source in the corner below -->

Code Example 3

<canvas id="YourCvsName" width="200" height="100"></canvas>

Code Example 4

//Creates a canvas and draws a circle
var canvas = document.body.appendChild(document.createElement("canvas"));
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, Math.PI * 2);
ctx.fillStyle = "red";
ctx.strokeStyle = "black";
ctx.stroke();
ctx.fill();

Code Example 5

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

 ctx.moveTo(0, 0);
ctx.lineTo(200, 100);

 ctx.stroke();

Code Example 6

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

<!-- go to chriscourses.com to learn lots -->

Learn ReactJs, React Native from akashmittal.com