CODEWITHSUNDEEP
javascripthtmlcsscanvas
Ajox
Ajox

Reputation: 25

Canvas Sizing issue

I'm trying to use a canvas as a header of my webpage which I would like to draw something akin to a sky, but since my canvas is stretched my contents are also being stretched.

Is it possible to use a canvas with these dimensions and still get correct ratio?

http://jsfiddle.net/ja98N/

Any help would be immensely appreciated.

body{
    background-color:black;
    margin:0px;
}

#sky{
    background: aqua;
    height: 70px;
}

#myCanvas{
    width: 100%;
    height: 100%;
}

Upvotes: 1

Views: 80

Answers (1)

user3535675
user3535675

Reputation:

This will fix the problem. I only added 2 lines to your Javascript code:

var canvas = document.getElementById("myCanvas");

canvas.width = document.getElementById('sky').offsetWidth;
canvas.height = document.getElementById('sky').offsetHeight;

if (canvas.getContext) {
    var context = canvas.getContext("2d");
    context.beginPath();
    context.arc(50, 50, 8, 0 , 2 * Math.PI);
    context.stroke();
}

Fiddle here: http://jsfiddle.net/z2YdL/2/

Upvotes: 1

Related Questions