javascript - HTML5 Canvas "The Bleeding-effect" with text -

javascript - HTML5 Canvas "The Bleeding-effect" with text -

i have canvas hidden on page load:-

<canvas id="mycanvas" width="915" height="900" style="visibility :hidden; border : 2px double #000000;"></canvas>

question 1:) want create visible on button click:- //submit button//

<asp:button id="button6" backcolor="silver" onclientclick="store_memid(); document.getelementbyid('mycanvas').visibility = 'visible'; homecoming false;" style="margin-left: 20px" runat = "server" text="submit" width="102px" font-bold="true" height="28px" />

something that, although doesn't work. wrong syntax assumption...any ideas?

(question 2:) when re-draw on canvas, comes out good, when text-stuff reprinted, becomes little 'muddy'.. distorted. m thinking solve easiest way erase canvas , redraw it. suggestions why 'the muddy effect' , solutions it?

(answer 2:) bleeding effect resolved adding canvas.width = canvas.width @ begining of canvas script.

however, ctx.clearrect(0, 0, 915, 900); didn't resolve bleeding effect.

question 1:

further comments, clearrect should work assuming code correct. it's more preferable canvas.width = canvas.width; method it's fair bit quicker. suspect it's not working due 2nd point below.

question 2:

a couple of things:

you're missing quote (") @ origin of style property in jsfiddle.

<canvas id="mycanvas" width="915" height="900" style = border: 2px double #000000;"></canvas>

you're referencing canvas "mycanvas" you're creating new 1 called canvas (referencing same var).

var can = document.createelement("canvas")

hiding "mycanvas" not hide "canvas" (assuming code right - i'm not familiar asp).

javascript asp.net html5-canvas