При створенні елемента canvas необхідно задати атрибут id (визначає ім'я елемента для доступу до нього з скриптів) і його розміри за допомогою атрибутів width (ширина) і height (висота).
Вміст поміщене між тегами буде відображено якщо браузер користувача не підтримує елемент canvas.
Зверніть увагу: сам по собі canvas нічого не малює. Він являє собою полотно, який надає можливості для малювання клієнтським скриптів.
Малює зафарбований прямокутник.
Малює не зафарбований прямокутник.
Очищає зазначену зону роблячи її повністю прозорою.
Зверніть увагу: параметри x і y задають величину зсуву прямокутника по горизонталі (x) і вертикалі (y) від верхнього лівого кута полотна у пікселях.
Тепер спробуємо намалювати, що-небудь на полотні.
- var canvas = document.getElementById ( "draw") - знаходимо потрібний полотно;
- var x = canvas.getContext ( "2d") - звертаємося до вбудованого об'єкту, який містить різні методи для малювання (перші два кроки є стандартними для малювання будь-якого об'єкта в canvas);
- x.fillRect (50,40,55,55) - малюємо зафарбований прямокутник;
- x.strokeRect (150,70,55,55) - малюємо НЕ зафарбований прямокутник;
- x.clearRect (68,57,20,20) - очищаємо зону в закрашенном прямокутнику.
Складові фігури складаються з декількох з'єднаних простих об'єктів (таких як лінії, кола і т.д.).
Зверніть увагу: метод closePath () може бути відсутнім.