Увеличить разрешение холста HTML5 ⇐ Html

[Anonymous]

Я пробовал все, что видел здесь, но, кажется, ничего не работает в моем коде, или, может быть, я просто не знаю, как его применить. />

Код: Выделить всё

Canvas Resize

canvas {
border: 1px solid black;
}

body {
margin: 0px;
}

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();
})();

Вот моя скрипкая: https://jsfiddle.net/8cp5qmob/

Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/505 ... resolution