Canvas toDataURL() method is saving low resolution image

Question

I have made a polygonal background generator using HTML5 canvas over at:

http://codepen.io/rfalor/pen/LhinJ

This is the relevant code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var dataURL = canvas.toDataURL();
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('canvasImg').src = dataURL;

When an user clicks the canvas, and subsequently "Prepare Image", the image that is saved on right click is of low resolution(300px x 150px), instead of the canvas resolution. How do I allow the user to save a higher resolution image?

Answer 1

The problem is you're sizing the canvas using css rather than the width and height properties of the canvas element. When you do that you're only stretching the canvas not increasing the coordinate space of the element.

I added the following to your code

canvas.width = 700;
canvas.height = 396;

Then I had to change your randomize function a bit to accept a number since it wont always be 500;

function randomize(num) {
    var a = Math.floor(Math.random() * num);
    return a;
}

And you can now call your lineTo's like this

ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
ctx.lineTo(randomize(canvas.width), randomize(canvas.height));

However I realize you probably want it to be more than the width and height so you don't see the edges of the shapes but I figure you can fix that up.

Live Demo

Fully modified code below.

var canvas = document.getElementById('canvas');

function randomize(num) {
    var a = Math.floor(Math.random() * num);
    return a;
}

function sides() {
    var a = Math.floor(Math.random() * 10);
    return a;
}

function getRndColor() {
    var r = 255 * Math.random() | 0,
        g = 255 * Math.random() | 0,
        b = 255 * Math.random() | 0,
        alpha = 0.1; //Math.random().toFixed(1);
    var final = 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
    return final;
}

$('*').click(function () {
    clearInterval(timer);
    $('button').show();
});

$('button').click(function () {
    $(this).css('left', '-400px');
    $('h3').text("Right click and save a beautiful background!");
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var dataURL = canvas.toDataURL();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    document.getElementById('canvasImg').src = dataURL;
    $('#canvasImg').css('border', '5px solid black');
    $('#canvas').hide();
    $('#canvasImg').show();
});

if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var left = true;

    canvas.width = 700;
    canvas.height = 396;

    var timer = setInterval(function () {
        for (var i = 1; i <= 1000; i++) {
            ctx.beginPath();
            if (left) {
                ctx.moveTo(0, randomize(canvas.height));
                left = false;
            } else {
                ctx.moveTo(randomize(canvas.width), 0);
                left = true;
            }
            ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
            ctx.lineTo(randomize(canvas.width), randomize(canvas.height));
            ctx.fillStyle = getRndColor();
            ctx.fill();
        }
    }, 1000);
}