Canvas

Атрибут Описание
width Ширина холста
height Высота холста

Элемент canvas был введен в HTML5 для рисования графики.

<canvas id="myCanvas">
    Не могу отобразить графику. Элемент canvas не поддерживается вашим браузером (IE&lt;9).
</canvas>

Вышеупомянутый элемент создаст прозрачный элемент HTML <canvas> размером 300 × 150 пикселей. Вы можете использовать элемент canvas для рисования потрясающих вещей, фигур, графиков, манипуляции изображениями, создания с помощью JavaScript привлекательных игр и т. д. Интерфейс CanvasRenderingContext2D предоставляет контекст 2D рендеринга для поверхности рисования элемента <canvas>. Для того, чтобы получить объект этого интерфейса, следует вызвать метод getContext() объекта <canvas>, передав ему в качестве первого аргумента строку "2d":

var ctx = document.getElementById("myCanvas").getContext("2d");
// сейчас мы получили 2D контекст холста в `ctx`
ctx.fillStyle = "#0f0";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x, y, ширина, высота
ctx.fillStyle = "#000";
ctx.fillText("Мой зеленый холст с некоторым черным текстом", 24, 32); // текст, x, y

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <title>Рисование двух прямоугольников на холсте</title>
    <style>
        canvas{
            border:1px solid gray;
        }
    </style>
    <script async>
        window.onload = init; // по окночанию загрузки вызывает init() 
        function init(){
            // #1 - Получаем элемент <canvas> 
            var canvas = document.querySelector('canvas');

            // #2 - получаем контекст холста
            var ctx = canvas.getContext('2d');
            // #3 - теперь все операции заливки будут красными
            ctx.fillStyle = 'red';
            // #4 - заливаем прямоугольник 100x100 в точке x=0,y=0
            ctx.fillRect(0,0,100,100);

            // #5 - теперь все операции заливки будут зелеными
            ctx.fillStyle = 'green';

            // #6 - заливаем прямоугольник 50x50 в точке x=25,y=25
            ctx.fillRect(25,25,50,50);
        }
    </script>
</head>
<body>
    <canvas width=300 height=200>Не могу отобразить графику. Элемент canvas не поддерживается вашим браузером (IE&lt;9).</canvas>
</body>
</html>

Получим: