0

I am trying to draw a sharp thin rectangle using canvas control.I want the canvas background to get loaded with an image and in foreground with some text .

Though i am able to set the color and text they are somehow appearing blurred.Is there a way to fix this issue ?

And i want to apply an image as background image for each canvas rectangle i will draw.These rectangels will appear a in a div control.So wherever there is a canvas rectangle i want its background image to be filled with the image i choose.entire div will not be filled with canvas rectangles but only half of it.Is there a way whether we can have one image for all the canvas rectangles i will draw or do ineed to draw it for every rectangle ?

html:

<div id="divBoard" >            
        <canvas id="canvasBoard" />           
</div>

javascript:

canvas = document.getElementById("canvasBoard");
if (canvas.getContext) {
    var context = canvas.getContext("2d");
}
context.fillStyle = "green";   
context.fillRect(x, y, width,height);
context.font = "5px tahoma";
context.fillStyle = "black";
context.fillText("cell"+i, x, y + width);

this is the image displayed after executing my code this is the image displayed after executing my code

JayC
  • 7,053
  • 2
  • 25
  • 41
krrishna
  • 2,050
  • 4
  • 47
  • 101
  • I did a little cleanup of your question. In particular, the javascript wasn't lined up, so it wasn't clear if it's all one code block. I can tell you now the code looks a little odd with the `var` declaration in the `if` block. – JayC Oct 24 '12 at 16:50

2 Answers2

0

I have experienced the same issue with fonts not rendering as sharply on a canvas. In my project I did a workaround by placing the font in a separate DIV and overlaying it on the canvas using an appropriate z-index. This approach worked very well for me.

Darren
  • 722
  • 4
  • 12
0

Have you tried adding 0.5 to x and y? The html5 canvas uses antialiasing so if you want "crisp" lines, you need to draw "in between" the pixels.

You will find a good explanation on how this works in mozilla developer reference page for lineWidth

PS. also see this question

Community
  • 1
  • 1
Dreen
  • 6,976
  • 11
  • 47
  • 69
  • After adding 0.5 to x and y wherever they are used, i see some improvement with lines and font.But still they are not sharp.Same case with Image also. – krrishna Oct 24 '12 at 15:04
  • how do i attach my code which is in text file in comment box here? – krrishna Oct 24 '12 at 16:37
  • just edit your question or post it on http://jsfiddle.net . Can you post more code? What you have now is quite clearly missing the for loop and declaration of `x`, `y`, `width` and `height`. – Dreen Oct 25 '12 at 18:59