Draw Distorted Image on HTML5's Canvas

HTML5 Canvas distorted?

Fixed it myself, I had to set the width and height via the tag, not CSS. Lucky guess.

<canvas width='400' height='300'></canvas>

HTML canvas distorts an image

If you only change the x and y positions of your image (translate), no need to change its width and height (fourth and fifth arguments of drawImage):

var prev_mouse_x = null;
var prev_mouse_y = null;
var pressed = false;

function get_pos_in_canvas(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: event.clientX - rect.left,
      y: event.clientY - rect.top
    };
}

document.getElementById('map').onmousedown = event => {
    pressed = true;
    prev_mouse_x = null;
    prev_mouse_y = null;
}

document.getElementById('map').onmousemove = event => {
    if (pressed)
    {
        if (prev_mouse_x != null) {
            var dx = event.pageX - prev_mouse_x;
            var dy = event.pageY - prev_mouse_y;
            move(dx, dy);
        }
        prev_mouse_x = event.pageX;
        prev_mouse_y = event.pageY;
    }
};

document.getElementById('map').onmouseup = event => {
    pressed = false;
}

camera = [0, 0];
var ctx = document.getElementById('map').getContext('2d');

function move(dx, dy) {
    camera[0] -= dx;
    camera[1] -= dy;
}

const image = document.getElementById('source');

function draw(time) {
    ctx.clearRect(0, 0, 500, 500);
    ctx.drawImage(image, 0 - camera[0], 0 - camera[1], 2000, 2000)
    window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);

<html>
<body>
Example
<br>
<div style="display:none;">
  <img id="source"
       src="https://i.stack.imgur.com/kthr8.jpg">
</div>
<canvas id='map' width=500 height=500></canvas>
</body>
</html>

Canvas drawing gets distorted when resizing canvas

You must set the size of canvas using its correct properties/attributes.

Canvas is an element with a bitmap. If you use CSS or style you will only scale the element, not the bitmap. The result is a blurry image.

Set correct size by doing this (and CSS is not necessary normally):

<canvas width=800 height=800></canvas>

or in JavaScript:

canvas.width = 800;    // example size
canvas.height = 800;

If you use CSS, either using a rule or the style attribute in the element, to scale the canvas you will only scale a 300x150 pixel bitmap to something else which will give bad quality. Always scale the bitmap and then redraw (as the canvas will be cleared).

How to fix warped/distorted and cut-out images in HTML canvas object with javascript?

The 4th and 5th argument of the drawImage method are width and height, not x2 and y2.

The documentation on MDN uses this in the first example

ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);

with the explanation

The source image is taken from the coordinates (33, 71), with a width of 104 and a height of 124. It is drawn to the canvas at (21, 20), where it is given a width of 87 and a height of 104.

tl;dr

You have to provide the width/height of the cutout image, not the coordinates of the bottom right corner:

context.drawImage(testimage, x1, y1, x2 - x1, y2 - y1, 0, 0, 300, 300);

why do figures appear distorted on canvas?

Set the size of the canvas using it's width and height attributes (for tag) or properties (in JS):

<canvas id="..." width=400 height=400></canvas>

in JS:

canvasEl.width = 400;
canvasEl.height = 400;

Don't use CSS as that only affects the canvas element but not its bitmap (consider canvas as an image). The default size of a canvas is 300 x 150 pixels. If you don't change that size it will be stretched to the size you set using CSS. This is why we in general don't recommend using CSS (there are special cases though where CSS is necessary such as print situations, non 1:1 pixel aspect ratios and so forth).

Blurry images and text rendered with canvas in HTML5

The Problem is that Devices that have High-Resolution Screens can have a devicePixelRatio that is not 1:1 to get a crystal clear image and text. While Mac-Books with Retina Screen got a devicePixelRatio of 1:2, the Nexus 7, has a devicePixelRatio of around 1.325.

Sample Image

See more Information here:
http://www.html5rocks.com/en/tutorials/canvas/hidpi/