CODEWITHSUNDEEP
javascriptjquerycanvas
Alon Shmiel
Alon Shmiel

Reputation: 7121

Remove elements from a canvas

This is my jsfiddle:

http://jsfiddle.net/alonshmiel/c4upM/45/

and I have two things that I need to do in order to finish the task:

1) when the user clicks the small gray circle, remove the line from the small light blue circle.

I tried to do in this code:

// hide the line of the small light blue circle
var c=document.getElementById(canvas_id);
var ctx=c.getContext("2d");
ctx.clearRect(c.getAttribute('cx')-1,c.getAttribute('cy')-95,2,40);

It works but not perfectly (the clearRect clears part of a small area that I want to clear).

2) when the user clicks the small lightblue circle, remove the line from the smal gray circle.

Any help appreciated!

Thank you for reading!

Upvotes: 0

Views: 151

Answers (1)

Steven Hansen
Steven Hansen

Reputation: 3239

If I understand your question right, you mean that clearRect clears part of something you don't want cleared? In particular, I'm assuming you mean the grey arc underneath the circle is left with an artifact after removing the line.

The problem is that your current "fix-up" is insufficient. Just like you had to re-draw the blue circle after erasing the line through it, you also need to re-draw your arc, since part of it is being erased with your clearRect call.

In general, it is hard to tell precisely how certain draw routines will be implemented in certain browsers. Anti-aliasing might be on or off (etc), causing a "fix-up" to be difficult. An easier approach (and preferred unless render power is at a premium) is to clear the whole background when the circle is clicked, and then re-render everything, except for the offending line.

Upvotes: 2

Related Questions