CODEWITHSUNDEEP
javascripthtmlcanvas
treeno
treeno

Reputation: 2600

Html5 Canvas: alternative for drawImage()

Since I faced some rounding issues* with the default scale()-function of canvas I've implemented my own matrix-transformations for canvas. This is working fine with a sole exception, I cannot rotate an image because the drawImage() function can only be parameterized with the top left corner of the picture.

Is there any other method to draw an image on a canvas? A method that can be parameterized with at least the coordinates for the top, left and the bottom right corner?, so that I can manually rotate the coordinates?

*The issue is a one-pixel-gap between shapes after scaling by a factor < 1.

Upvotes: 1

Views: 2086

Answers (1)

Loktar
Loktar

Reputation: 35309

Based off of your fiddle in the comments you could use an in memory canvas as a back buffer to draw what you need to at normal size, then scale the context of your main canvas and use drawImage to draw the scaled result.

enter image description here

Live Demo 

var canvas = document.getElementById('c');
var context = canvas.getContext('2d');

var backBuffer = document.createElement("canvas"),
    bCtx = backBuffer.getContext("2d");

paint = function (x, y, scale) {

    bCtx.clearRect(0,0,backBuffer.width,backBuffer.height);;
    bCtx.beginPath();
    bCtx.rect(x, y, 30, 30);
    bCtx.fillStyle = 'black';
    bCtx.fill();

    bCtx.beginPath();
    bCtx.rect(x + 30, y, 30, 30);
    bCtx.fillStyle = 'black';
    bCtx.fill();

    context.save();
    context.scale(scale,scale);
    context.drawImage(backBuffer,0,0);
    context.restore();
}

paint(10, 10, 1);
paint(10, 70, .66);

Upvotes: 1

Related Questions