Html
Напишем код в файле 1.html
<html>
<!-- заголовок -->
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<!-- страница -->
<body>
<!-- HTML canvas -->
<canvas id="canvas1" width='400px' height='300px'></canvas>
<!-- JavaScript функции -->
<script>
// рисуем прямоугольник
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>
<!-- главный код -->
<script>
<!-- context для рисования -->
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
<!-- рисуем прямоугольник -->
MyDrawRectangle(context, 'black', 4, 'orange', 10, 20, 100, 120)
</script>
</body>
</html>