Menu
I have tried everything I saw in here, but nothing seems to work on my code, or maybe I just don't know how to apply it.
I am trying to get a better resolution in my html canvas, because the rectangles look a little bit "blurred".
Here's my code: html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Resize</title>
<style>
canvas {
border: 1px solid black;
}
body {
margin: 0px;
}
</style>
</head>
<body>
<canvas id="sig-canvas" width="1280" height="739"></canvas>
<p id="timer"></p>
<script src="canvas.js"></script>
</body>
</html>
javascript:
var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d");
var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
canvas.addEventListener("mousemove", function (e) {
mousePos = getMousePos(canvas, e);
drawing = true;
}, false);
// Get the position of the mouse relative to the canvas
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: mouseEvent.clientX - rect.left,
y: mouseEvent.clientY - rect.top
};
}
// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimaitonFrame ||
function (callback) {
window.setTimeout(callback, 1000/60);
};
})();
// Draw to the canvas
function renderCanvas() {
if (drawing) {
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(mousePos.x, mousePos.y, 25, 25);
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
ctx.strokeRect(mousePos.x, mousePos.y, 25, 25);
lastPos = mousePos;
}
}
// Allow for animation
(function drawLoop () {
requestAnimFrame(drawLoop);
renderCanvas();
})();
Here's my fiddle: https://jsfiddle.net/8cp5qmob/
Thank you!
247
The resolution is set by setting the canvas element width and height properties. If not specified the canvas defaults to 300 by 150 pixels. The following canvas will use the above CSS size but as the width and height is not specified the resolution will be 300 by 150.
The answer to this Question is the Pixels of the screen. The amount of blur often depends on the browser or the device you are using to view the Canvas. The Pixel ratios vary for different devices and so we get to see blurry effects.
Canvas has two sizes, the size of the element and the size of the drawing surface. The default size for both element and drawing surface is 300 x 150 screen pixels. To set the height and width canvas HTML5 has two attributes: Height: With the help of Height attribute we can set the height.
To increase the resolution of your canvas, I've had good results mixing CSS (for how many pixels it takes up on screen) with canvas.width and canvas.height (for how many pixels it internally uses). It looks like this:
CSS:
#sig-canvas {
width: 1280px;
height: 739px;
}
JavaScript:
var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d")
var scale = 2;
canvas.width = 1280 * scale;
canvas.height = 739 * scale;
The tricky thing about using this technique is that you have to multiply or divide by the scale when converting between on-screen coordinates to canvas coordinates. In this case, I converted on-screen coordinates to canvas coordinates in getMousePos:
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: (mouseEvent.clientX - rect.left) * scale,
y: (mouseEvent.clientY - rect.top) * scale
};
}
Here's a snippet that shows all of it together:
var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d")
var scale = 2;
canvas.width = 1280 * scale;
canvas.height = 739 * scale;
var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
canvas.addEventListener("mousemove", function (e) {
mousePos = getMousePos(canvas, e);
drawing = true;
}, false);
// Get the position of the mouse relative to the canvas
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: (mouseEvent.clientX - rect.left) * scale,
y: (mouseEvent.clientY - rect.top) * scale
};
}
// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimaitonFrame ||
function (callback) {
window.setTimeout(callback, 1000/60);
};
})();
// Draw to the canvas
function renderCanvas() {
if (drawing) {
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(mousePos.x, mousePos.y, 25, 25);
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
ctx.strokeRect(mousePos.x, mousePos.y, 25, 25);
lastPos = mousePos;
}
}
// Allow for animation
(function drawLoop () {
requestAnimFrame(drawLoop);
renderCanvas();
})();#sig-canvas {
width: 1280px;
height: 739px;
}
canvas {
border: 1px solid black;
}
body {
margin: 0px;
}<canvas id="sig-canvas"></canvas>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
