Canvas smoothing scale example

by Bacher

HTML

<canvas id="cvn1"></canvas>
<canvas id="cvn2"></canvas>

CSS

canvas {
    outline: 1px solid black;
    width: 400px;
    height: 200px;
}

JavaScript

var cvn1 = $('#cvn1')[0];
var ctx1 = cvn1.getContext('2d');

var cvn2 = $('#cvn2')[0];
var ctx2 = cvn2.getContext('2d');

ctx1.translate(0.5, 0.5);
ctx1.beginPath();
ctx1.moveTo(50, 50);
ctx1.lineTo(100, 150);
ctx1.strokeStyle = '#000';
ctx1.lineWidth = 1;
ctx1.stroke();


ctx2.scale(0.5, 0.5);
ctx2.beginPath();
ctx2.moveTo(100, 100);
ctx2.lineTo(200, 300);
ctx2.strokeStyle = '#000';
ctx2.lineWidth = 2;
ctx2.stroke();