Зображення прямокутника
Щоб намалювати простий сірий прямокутник 450 х 350 пікселів, що займає весь полотно, прописують код.
Дані width і height визначають розмір поверхні. Становище, яке займає цей полотно у веб, визначаться тим місцем, де пишуть елемент HTML. Приклади JavaScript Canvas, можна розмістити всередині таблиці або всередині плаваючого контейнера.
Якщо платформа не підтримує стиль, з’явиться текст «Ваш браузер не підтримує Canvas». Тоді поміщають тег з захопленням малюнка, який створює полотно. Щоб мати можливість посилатися на конкретний елемент в коді Javascript, зручно дати йому ідентифікатор, наприклад id = miCanvas.
Коли створений елемент, виконують JS код, який робить малюнки. Це повинно бути зроблено після створення полотна. Один із способів виконання – використовувати властивість onLoad. Як тільки сторінка завантажена, виконується функція drawCanvas ().
Перше, що потрібно зробити, це отримати вузол DOM, використовуючи інструкції: var canvas = document.getElementById (‘miCanvas’), і передати як параметр ідентифікатор елемента полотна. Далі отримують об’єкт контексту JavaScript Canvas text:var context = canvas.getContext (‘2d’).
Існує два можливих контексту: 2d для малювання в двох вимірах і webgl для зображення в трьох вимірах. Маючи об’єкт контексту, можна застосувати всі функції і властивості, пов’язані з ним.
