CanvasRenderingContext2D.scale()

CanvasRenderingContext2D.scale() - маштабування.

Синтаксис:

ctx.scale(x, y);

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

x - коефіцієнт масштабування в горизонтальному напрямку.

y - коефіцієнт масштабування у вертикальному напрямку.

Опис:

scale() метод об'єкту CanvasRenderingContext2D який маштабує подальше малювання на полотні canvas.

Маштабування відбувається як в більшу так і в меншу сторону в залежності від вказаного коефіцієнта. Один коефіцієнт дорівнює один піксель, відповідно: 1=100%, 0.5=50% (зменшення в 2 рази), 2=200% (збільшення в 2 рази).

Відємний коефіцієнт перевертає полотно: scale(-1, 1) - перевертає по горизонталі, а scale(1, -1) - перевертає по вертикалі:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.scale(-1, 1);
ctx.font="24pt arial";
ctx.fillStyle="blue";
ctx.fillText("JavaScrip", -150, 50);

Приклад:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle="#ae00ff";
ctx.fillRect(10, 10, 10, 10);
ctx.scale(4, 4);

ctx.fillStyle="red";
ctx.fillRect(10, 10, 10, 10);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.scale(0.25, 0.25);
ctx.fillStyle="blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle="red";

ctx.scale(1, 1); 
ctx.fillRect(10, 10, 10, 10);