CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvascreatejs
Nish
Nish

Reputation: 325

Resizing canvas with its text content

I have one canvas with some text and i want to re-size it in all directions but problem is that text content inside that canvas is getting blurred if i make it re-sizable by using css properties.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

I have tried jquery re-sizable with container to canvas and resize canvas by using css but getting text content's height/width problem and also text is getting blurred. can anyone help me please..

Upvotes: 0

Views: 898

Answers (1)

markE
markE

Reputation: 105035

Yes, text has many small & tight curves whose flaws quickly become visible if you try to resize the original text. Therefore, resizing text-especially resizing larger, will always result in the texts natural "jaggies" and anti-aliasing artifacts becoming more visible.

The usual approach to canvas is to treat everything on the canvas as redrawable. Using that approach, you could clear the canvas and redraw the text using an appropriately resized font.

If your text will always appear topmost on your canvas drawings, an alternative would be to place an SVG element on top of your canvas. SVG text scales well because it is vector based, rather than pixel based. You could use the svg translate+scale to position & resize the svg text according to your scale factor. Here's a link showing how it's done: http://msdn.microsoft.com/en-us/library/gg589508(v=vs.85).aspx

Upvotes: 1

Related Questions