在画布元素中绘制文本

Question

could you tell me what is the problem with the text on my canvas? I tried to change the text size if I make it bigger it looks fine but if I make it smaller it looks weird. I'm not sure what exactly affect the text; I tried to play with font property but with no result, whenever I make the font smaller I got the result like in the snippet below here is my code

 (function(){ function init(){ var canvas = document.getElementsByTagName('canvas')[0]; var c = canvas.getContext('2d'); var animationStartTime =0; c.fillStyle = 'white'; c.font = 'normal 10pt'; var textarray = 'you can live a beatiful life with a postive mind'; var j=1; //time - next repaint time - HRT function draw(time){ c.fillText(textarray.substr(0,j),10,70); if(time - animationStartTime > 100){ animationStartTime = time; j++; } if( j <= textarray.length){ requestAnimationFrame(draw); // 17ms } } function start(){ animationStartTime = window.performance.now(); requestAnimationFrame(draw); } start(); } //invoke function init once document is fully loaded window.addEventListener('load',init,false); }()); //self invoking function 

 #canvas{ overflow:hidden; background-image: url('http://linux2.gps.stthomas.edu/~algh3635/practice/proj/img/img4.jpeg'); background-repeat: no-repeat; background-size: cover; } canvas { width:100%; height:80vh; left: 0; margin: 0; padding: 0; position: relative; top: 0; } 

 <div id="canvas"> <div class="row"> <div class="col-lg-12 text-center" > <canvas > </canvas> </div> </div> </div> 

Answer 1

When you fillText on the canvas, it stops being letters and starts being a letter-shaped collection of pixels. When you zoom in on it, the pixels become bigger. That's how a canvas works.

When you want the text to scale as a vector-based font and not as pixels, don't draw them on the canvas. You could create HTML elements instead and place them on top of the canvas using CSS positioning. That way the rendering engine will render the fonts in a higher resolution when you zoom in and they will stay sharp. But anything you draw on the canvas will zoom accordingly.

But what I would recommend for this simple example is just doing it in html, css, and javascript like so:

 var showText = function (target, message, index, interval) { if (index < message.length) { $(target).append(message[index++]); setTimeout(function () { showText(target, message, index, interval); }, interval); } } $(function () { showText("#text", "you can live a beatiful life with a postive mind", 0, 100); }); 

 #canvas{ position: relative; width: 100%; height: 80vh; overflow:hidden; background-image: url('http://linux2.gps.stthomas.edu/~algh3635/practice/proj/img/img4.jpeg'); background-repeat: no-repeat; background-size: cover; } #text { position: absolute; top: 50%; left: 20px; color: #fff; font-size: 20px; } 

 <div id="canvas"> <p id="text"> </p> </div> 

I'll leave it up to you to position the text and whatnot but you can see in this example that you can make the text as small, or as big, as you want.

However

...if you still absolutely need it to be a canvas then the following example works. It works because the canvas is not being stretched by css, the width and height are predefined.

The canvas element runs independent from the device or monitor's pixel ratio.

On the iPad 3+, this ratio is 2. This essentially means that your 1000px width canvas would now need to fill 2000px to match it's stated width on the iPad display. Fortunately for us, this is done automatically by the browser. On the other hand, this is also the reason why you see less definition on images and canvas elements that were made to directly fit their visible area. Because your canvas only knows how to fill 1000px but is asked to draw to 2000px, the browser must now intelligently fill in the blanks between pixels to display the element at its proper size.

I would highly recommend you read this article from HTML5Rocks which explains in more detail how to create high definition elements.

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

 #canvas{ position: relative; overflow:hidden; background-image: url('http://linux2.gps.stthomas.edu/~algh3635/practice/proj/img/img4.jpeg'); background-repeat: no-repeat; background-size: cover; } 

 <!DOCTYPE html> <html> <body> <canvas id="canvas" width="800" height="500" style="border:1px solid #d3d3d3;"> Your browser does not support the canvas element. </canvas> </body> </html>