html5 canvas

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

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

//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();

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

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

 ctx.stroke(); 

#this code creates a circle within a canvas that must be created in HTML
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

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

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

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