Distorted canvas shape when using dynamic dimensions

I'm trying to create a guillotine-blade shaped trapezium using the canvas element, based on the current viewport dimensions full width, half height), but every time I do this the coordinates seem to be out of proportion (and sometimes the shape that I draw seems magnified - the edges are pixelated as though I've zoomed in x10)

My code currently looks like this (I'm using jquery 1.5.x) - it's on jsfiddle

//Get the page dimensions:
var page = {
    width:$(window).width(),
    height:$(window).height()
};
var halfHeight = page.height/2;
var canvas = $('<canvas />', {width:page.width, height:page.height});
var blade1 = canvas[0].getContext('2d');
blade1.fillStyle = "#000";
blade1.beginPath();
blade1.moveTo(0,0); // topleft
blade1.lineTo(page.width, 0); //topright
blade1.lineTo(page.width,halfHeight/2); //right, quarterway down
blade1.lineTo(0,(halfHeight)); //left, halfway down
blade1.closePath();
blade1.fill();
$(canvas[0]).css({backgroundColor:'#fc0'});
$开发者_StackOverflow社区(canvas[0]).prependTo('body');

I think my calculations make sense as it's a simple shape, but it's not fitting inside the canvas at all.

Can anyone help me make this shape work inside a dynamically generated canvas element? THe reason I'm doing it all in JS is that I only want to do this if the referrer is outside the current domain.

Edit: It looks like you have to set display: block; on the canvas element in jsfiddle to eliminate the additional spacing that's causing the scrollbars. Here's the corrected version: http://jsfiddle.net/LAuUh/3/

You will probably want to hook into the window resize event so that you can re-draw the guillotine and resize the canvas. Otherwise, if the user resizes their browser the background won't fit anymore.

I'm not quite sure where the extra few pixels of spacing are coming from in the jsfiddle example, but tested on a standalone page this code seems to achieve what you're looking for:

    var vpW = $(window).width();
    var vpH = $(window).height();
    var halfHeight = vpH/2;
    var canvas = document.createElement("canvas");
    canvas.width = vpW; canvas.height = vpH;
    var blade1 = canvas.getContext('2d');
    blade1.fillStyle = "#000";
    blade1.beginPath();
    blade1.moveTo(0,0); // top left
    blade1.lineTo(vpW, 0); // top right
    blade1.lineTo(vpW,halfHeight / 2.0); // right, quarterway down
    blade1.lineTo(0,halfHeight + halfHeight / 2.0); // left, threequarters down
    blade1.closePath();
    blade1.fill();

    $(canvas).css('backgroundColor','#fc0');
    $(canvas).prependTo('body');

With this CSS:

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

The main issue that I fixed was the coordinates you were using for your guillotine shape. In addition, using this syntax:

var canvas = $('<canvas />', {width:page.width, height:page.height});

when you create your canvas element is not good as it applies the width and height as style attributes. With canvas elements, the CSS width and height controls magnification while the DOM-level object width and height attributes control the actual dimensions of the canvas.