Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML5 Canvas drawings like lines are looking blurry
HTML5 Canvas drawings often appear blurry due to differences in device pixel ratios and improper coordinate positioning. This occurs because browsers scale canvas content differently across various devices and screen densities, leading to anti-aliasing effects that make lines and shapes appear fuzzy.
The primary causes of blurry canvas drawings include −
Device Pixel Ratio − Different devices have varying pixel densities, causing the browser to scale canvas content.
Half-pixel positioning − Drawing on fractional pixel coordinates forces the browser to use anti-aliasing.
Canvas size mismatch − When canvas display size differs from its actual resolution.
Understanding Device Pixel Ratio
The window.devicePixelRatio property returns the ratio between physical pixels and CSS pixels on the current device. Modern high-resolution displays often have ratios of 2 or higher, meaning each CSS pixel corresponds to multiple physical pixels.
// Check device pixel ratio console.log(window.devicePixelRatio); // Often 1, 1.5, 2, or 3
Method 1: Adjusting for Device Pixel Ratio
The most effective solution is to scale the canvas based on the device pixel ratio. This ensures sharp rendering across all devices by matching the canvas resolution to the physical pixel density.
Example − Sharp Text Rendering
Following example demonstrates how to render sharp text by accounting for device pixel ratio −
<!DOCTYPE html>
<html>
<head>
<title>Sharp Canvas Text</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<canvas id="sharpCanvas" style="border: 1px solid black;"></canvas>
<script>
var canvas = document.getElementById('sharpCanvas');
var ctx = canvas.getContext('2d');
var size = 200;
// Set display size
canvas.style.width = size + "px";
canvas.style.height = size + "px";
// Get device pixel ratio
var scale = window.devicePixelRatio || 1;
// Set actual canvas size
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);
// Scale context to match device pixel ratio
ctx.scale(scale, scale);
// Draw sharp text
ctx.font = '16px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#333';
ctx.fillText("TUTORIALSPOINT", size / 2, size / 2);
// Draw sharp rectangle
ctx.strokeStyle = '#0066cc';
ctx.lineWidth = 2;
ctx.strokeRect(20, 20, size - 40, size - 40);
</script>
</body>
</html>
This produces crisp text and lines by matching the canvas resolution to the device's physical pixel density.
Method 2: Proper Line Positioning
Lines appear blurry when drawn on fractional pixel coordinates. To create sharp 1-pixel lines, position them on whole pixel boundaries and offset by 0.5 pixels.
Example − Sharp vs Blurry Lines
<!DOCTYPE html>
<html>
<head>
<title>Sharp vs Blurry Lines</title>
<style>
canvas { border: 1px solid #ccc; margin: 10px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Blurry Line (on whole pixels):</h3>
<canvas id="blurry" width="150" height="100"></canvas>
<h3>Sharp Line (offset by 0.5):</h3>
<canvas id="sharp" width="150" height="100"></canvas>
<script>
// Blurry line
var blurryCtx = document.getElementById("blurry").getContext("2d");
blurryCtx.lineWidth = 1;
blurryCtx.strokeStyle = '#000';
blurryCtx.beginPath();
blurryCtx.moveTo(10, 50);
blurryCtx.lineTo(140, 50);
blurryCtx.stroke();
// Sharp line
var sharpCtx = document.getElementById("sharp").getContext("2d");
sharpCtx.lineWidth = 1;
sharpCtx.strokeStyle = '#000';
sharpCtx.beginPath();
sharpCtx.moveTo(10.5, 50.5);
sharpCtx.lineTo(140.5, 50.5);
sharpCtx.stroke();
</script>
</body>
</html>
The first canvas shows a blurry line drawn on whole pixel coordinates. The second canvas shows a sharp line drawn with 0.5-pixel offset.
Method 3: Complete Sharp Canvas Setup
For professional results, combine device pixel ratio scaling with proper coordinate positioning.
Example − Comprehensive Solution
<!DOCTYPE html>
<html>
<head>
<title>Complete Sharp Canvas</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Sharp Canvas Drawing:</h3>
<canvas id="completeCanvas" style="border: 1px solid black;"></canvas>
<script>
function setupSharpCanvas(canvasId, width, height) {
var canvas = document.getElementById(canvasId);
var ctx = canvas.getContext('2d');
var scale = window.devicePixelRatio || 1;
// Set display size
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
// Set actual size
canvas.width = Math.floor(width * scale);
canvas.height = Math.floor(height * scale);
// Scale context
ctx.scale(scale, scale);
return ctx;
}
var ctx = setupSharpCanvas('completeCanvas', 250, 200);
// Draw sharp rectangle
ctx.strokeStyle = '#2196F3';
ctx.lineWidth = 1;
ctx.strokeRect(20.5, 20.5, 200, 150);
// Draw sharp grid
ctx.strokeStyle = '#ddd';
for (let i = 0; i <= 10; i++) {
let x = 20.5 + (i * 20);
ctx.beginPath();
ctx.moveTo(x, 20.5);
ctx.lineTo(x, 170.5);
ctx.stroke();
}
// Draw text
ctx.fillStyle = '#333';
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.fillText('Sharp Canvas Rendering', 125, 100);
</script>
</body>
</html>
This example creates a reusable function that sets up any canvas for sharp rendering with proper scaling and coordinate positioning.
Common Mistakes to Avoid
Setting canvas size only via CSS − Always set both the canvas element's width/height attributes and its CSS dimensions.
Ignoring device pixel ratio − Modern displays require scaling for sharp rendering.
Drawing on fractional coordinates − Use whole pixel coordinates with 0.5 offset for 1-pixel lines.
Forgetting to scale the context − After resizing canvas for device pixel ratio, scale the drawing context accordingly.
Browser Compatibility
The devicePixelRatio property is supported in all modern browsers. For older browsers, provide a fallback value of 1. The scaling techniques work consistently across all browsers that support HTML5 Canvas.
Conclusion
To fix blurry HTML5 Canvas drawings, scale the canvas based on devicePixelRatio and position elements on whole pixel boundaries with appropriate offsets. These techniques ensure sharp, crisp rendering across all devices and screen densities, providing a professional appearance for canvas-based graphics and user interfaces.
3K+ Views
