Центр изображения на холсте

Question

У меня есть Canvas 300x300 и изображение 150x150.

Как я могу нарисовать это изображение в центре этого холста. Что я пишу в context.translate и context.drawImage?

На каких браузерах это будет работать?

Answer 1

Ради аргумента давайте представим, что ваше изображение представляет собой прямоугольник.

ctx.fillRect(
             (canvasWidth - width) / 2, 
             (canvasHeight - height) / 2, 
             width, 
             height
            );

jsFiddle .

Применяется та же форма расчетов.

Answer 2

центр изображения должен быть размещен на 150,150.верхний левый угол изображения, который часто является точкой, используемой для рисования объектов, должен быть размещен в (150-150/2),(150-150/2), предполагая, что 0,0 - верхний левый уголВ общем, верхний левый угол должен быть в ((W-w)/2),((H-h)/2), где W и H - ширина и высота холста, а w и h - ширина и высота изображения, которое нужно нарисовать.

(извините, если вы спрашивали «как нарисовать изображение на холсте»)