How to resolve HTML5 Canvas distorted?

When working with HTML5 Canvas drawing, distortion issues are often encountered, especially when the Canvas size is adjusted or on high-resolution displays (such as Retina displays). Here are several effective methods to resolve Canvas distortion problems:

1. Adjusting Canvas Resolution and CSS Size

Canvas elements have two size settings: one is the canvas's native pixel resolution (set via width and height attributes), and the other is the actual size displayed on the page (set via CSS width and height). Distortion typically occurs when these two do not match. To resolve this, set the Canvas resolution to twice or higher than the CSS size to accommodate high-resolution displays.

html
<canvas id="myCanvas" width="600" height="400" style="width:300px; height:200px;"></canvas>

In this example, the Canvas drawing resolution is twice the display size, which helps improve display quality on high-resolution devices.

2. Using window.devicePixelRatio

Modern devices (especially mobile devices) may have different pixel densities. window.devicePixelRatio tells us the ratio of actual pixels to CSS pixels on the screen. We can use this ratio to dynamically adjust the Canvas size.

javascript
function setupCanvas(canvas) {
    var dpr = window.devicePixelRatio || 1;
    var rect = canvas.getBoundingClientRect();
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    var ctx = canvas.getContext('2d');
    ctx.scale(dpr, dpr);
}

var myCanvas = document.getElementById('myCanvas');
setupCanvas(myCanvas);

This code first retrieves the device pixel ratio, then sets the Canvas's actual drawing resolution based on this ratio, and scales the content to prevent distortion in graphics and text.

3. Appropriate Scaling

Appropriate scaling of the Canvas before drawing large images or complex renderings can reduce distortion. Adjust the context.scale() method to set the drawing scale before rendering.

4. Testing and Optimization

Since different devices and browsers may exhibit varying behaviors, thorough testing before deploying Canvas applications is crucial. Testing various resolutions and devices helps further tune and optimize Canvas performance.

1. Ensuring Consistency Between Canvas CSS Size and Attribute Size

In HTML5 Canvas, the width and height attributes define the actual pixel count of the drawing surface, while CSS width and height determine the displayed size. If these do not match, the canvas content is scaled, causing distortion.

Ensure that the HTML width and height attributes match the CSS width and height styles. For example:

html
<canvas id="myCanvas" width="500" height="500" style="width: 500px; height: 500px;"></canvas>

2. Considering Device Pixel Ratio

Modern devices (especially mobile devices) may have high pixel density, meaning each CSS pixel maps to multiple physical pixels (device pixel ratio, DPR). Without considering DPR, Canvas content may appear blurry.

Adjust the Canvas internal size to match the device pixel ratio. In JavaScript:

javascript
function setupCanvas(canvas) {
    var dpr = window.devicePixelRatio || 1;
    var rect = canvas.getBoundingClientRect();
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    var ctx = canvas.getContext('2d');
    ctx.scale(dpr, dpr);
}

var myCanvas = document.getElementById('myCanvas');
setupCanvas(myCanvas);

3. Using Appropriate Canvas Drawing Settings

When drawing images, ensure the image does not distort due to scaling. If scaling is necessary, use high-quality images and adjust the image size with ctx.drawImage() parameters.

javascript
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Here, sWidth and sHeight are the source image dimensions, and dWidth and dHeight are the target dimensions. Precise control of these parameters minimizes distortion.

4. Avoiding Unnecessary Repainting and Rescaling

Frequent repainting and rescaling during dynamic Canvas updates can cause performance issues and visual distortion. Minimize repaints and use buffering techniques, such as an invisible Canvas as a cache.