How to Add a JavaScript in HTML Canvas Graphics - HTML Canvas Graphics

After creating the rectangular canvas area, you must add a JavaScript to do the drawing.

Example of JavaScript in HTML Canvas Graphics

Here are some examples:

index.html

Example: HTML

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

Output should be:

Full Example of JavaScript in HTML Canvas Graphics

Here is full example

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

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

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>

Output should be:

Category:	Web Tutorial
Sub Category:	HTML Canvas Graphics
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference