CODEWITHSUNDEEP
htmlcanvashtml5-canvas
ilyo
ilyo

Reputation: 36391

Is it possible to keep canvas text sharp and responsive

When I give the canvas element width: 100% it gets pixelated even at a really small size. I tried giving the canvas itself a big size but it changes nothing. How can I keep the text sharp?

http://jsfiddle.net/kpknhuoa/

Upvotes: 1

Views: 424

Answers (1)

Adi
Adi

Reputation: 6354

Setting Canvas Tag's size though css is not the best way do it.
Cause it enlarges the canvas's original size by a ratio of the width and height values you specify in css.

Below is how to set canvas width to the size of the window.

var can = document.getElementById('overlay'),
    ctx = can.getContext("2d");

//innerWidth and innerHeight values of the window are the screen size.
can.width = window.innerWidth;
can.height = window.innerHeight;

ctx.font = "Bold 36px 'Helvetica'";
ctx.fillStyle = "black"; 
ctx.fillRect(0,0,1000,1000); 
ctx.globalCompositeOperation = 'destination-out'; 
ctx.fillText("Some Text", 25, 50);

Upvotes: 1

Related Questions