Система координат
Початком координат є точка (0,0), значення координати X йдуть вправо, а значення координати Y йдуть вниз, на відміну від традиційних систем координат. Розміщення об’єкту виконують відносно початку координат, наприклад, прямокутник знаходиться в позиції (90,70). Розмір полотна Canvas становить 450 в ширину та у висоту 350 для рядка: context.fillRect (0, 0, 450, 350). Буде намальована заповнена фігура з верхнім правим кутом в точці (0,0), шириною 450 і висотою 350, тобто вона займе весь полотно прикладу. Щоб намалювати прямокутник без заливки, застосовують: strokeRect (x, y, ширина, висота).
В Canvas немає певних функцій для малювання багатокутників, включаючи трикутники і пятиугольники (крім прямокутника). Спосіб роботи з полотном – малювати форми чи шляху (paths). Щоб побудувати форму, спочатку ініціалізують beginPath (), потім поміщають курсор у початкову точку застосовуючи moveTo (x, y). Там буде створена форма з різними можливостями для зображення.
Лінії, дуги і криві можна виконати, використовуючи: stroke(), яка малює відкриту або закриту форму без заливки. Якщо порівняти останню крапку з першої, форма буде закрита. Fill () малює замкнуту форму з заливкою. Якщо вона була відкрита, функція створює пряму від останньої до початкової точки, щоб завершити її.
