Objeto canvas: escalado no deseado

Puede ocurrir que a veces creemos un objeto canvas de forma dinámica:

$(“body”).append(‘<canvas id=”micanvas” style=”position:absolute;left:’+gpos.left+’px;top:0px;width:300px;height:300px;background-color:#fff;”></canvas>’);

y después trazamos por ejemplo una línea:

var canvas = document.getElementById(‘micanvas’);
var canvas1 = document.getElementsByTagName(‘micanvas’)[0];
canvas1.width = 300;
canvas1.height = 300;
var context = canvas.getContext(‘2d’);

context.beginPath();
context.moveTo(0, 50);
context.lineTo(200, 50);
context.strokeStyle = ‘#ff0000’;
context.stroke();

Si no fijamos el ancho del objeto canvas en si, y no solo en la hoja de estilos, los objetos que dibujemos saldrán escalados, de ahí que debamos fijar las dimensiones del objeto canvas:

var canvas1 = document.getElementsByTagName(‘micanvas’)[0];
canvas1.width = 300;
canvas1.height = 300;