Html
Let's write the code in the file 1.html
<html>
<!-- heading -->
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<!-- page -->
<body>
<!-- HTML canvas -->
<canvas id="canvas1" width='400px' height='300px'></canvas>
<!-- JavaScript Functions -->
<script>
// drawing a rectangle
function MyDrawRectangle(context, lineColor, lineWidth, fillColor, x, y, width, height)
{
context.beginPath();
context.rect(x, y, width, height);
context.fillStyle = fillColor;
context.fill();
context.lineWidth = lineWidth;
context.strokeStyle = lineColor;
context.stroke();
}
</script>
<!-- master code -->
<script>
<!-- context for drawing -->
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
<!-- drawing a rectangle -->
MyDrawRectangle(context, 'black', 4, 'orange', 10, 20, 100, 120)
</script>
</body>
</html>
Your feedback ... Comments ...