Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26769 > unrolled thread

canvas; draw vector then restore overwritten area later

Back to article view | Back to comp.lang.javascript

Contents

  canvas; draw vector then restore overwritten area later catebekensail@yahoo.com - 2015-01-31 11:19 -0800
    Re: canvas; draw vector then restore overwritten area later "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-01-31 20:36 +0100
    Re: canvas; draw vector then restore overwritten area later Denis McMahon <denismfmcmahon@gmail.com> - 2015-01-31 20:09 +0000
    Re: canvas; draw vector then restore overwritten area later Dr J R Stockton <reply1500@merlyn.demon.co.uk.invalid> - 2015-02-01 20:08 +0000
      Re: canvas; draw vector then restore overwritten area later Mike Duffy <md_004@videotron.ca> - 2015-02-04 00:58 -0500
        Re: canvas; draw vector then restore overwritten area later Dr J R Stockton <reply1500@merlyn.demon.co.uk.invalid> - 2015-02-05 23:16 +0000
          Re: canvas; draw vector then restore overwritten area later Mike Duffy <md_004@videotron.ca> - 2015-02-05 20:34 -0500
          Re: canvas; draw vector then restore overwritten area later "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2015-02-05 20:32 -0800
            Re: canvas; draw vector then restore overwritten area later Mike Duffy <md_004@videotron.ca> - 2015-02-06 00:28 -0500
    Re: canvas; draw vector then restore overwritten area later "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2015-02-01 18:58 -0800

#26769 — canvas; draw vector then restore overwritten area later

Perhaps this is a question better asked in an html group, but I'm going with you guys.  Most of the examples I see are javascript/jquery.  You should know.

I have a huge image and I want to point out various areas as users click around.  Say the image is a car.  If the user clicks a TIRE link, a round circle will be drawn around the tire.

That looks doable.  This is the question.  If the user now click HEADLIGHTS can I some how restore the TIRE area to normal (redraw the original image pixels under the circle) without an entire repaint?

Thanks in advance.

[toc] | [next] | [standalone]

#26771

catebekensail@yahoo.com wrote on 31 jan 2015 in comp.lang.javascript:

> Perhaps this is a question better asked in an html group, but I'm going
> with you guys.  Most of the examples I see are javascript/jquery.  You
> should know. 

Don't ask jquery Q here.

> I have a huge image and I want to point out various areas as users click
> around.  Say the image is a car.  If the user clicks a TIRE link, a
> round circle will be drawn around the tire. 
> 
> That looks doable.  This is the question.  If the user now click
> HEADLIGHTS can I some how restore the TIRE area to normal (redraw the
> original image pixels under the circle) without an entire repaint? 

Somehow it seems you will have to think in layers. How else would you 
repaint complicated backgrounds?

However methinks you should ask in a 'canvas animation' dedicated forum,
as javascript is only the means.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#26772

On Sat, 31 Jan 2015 11:19:12 -0800, catebekensail wrote:

> This is the question.  If the user now click
> HEADLIGHTS can I some how restore the TIRE area to normal (redraw the
> original image pixels under the circle) without an entire repaint?

Use a transparent canvas element layered over an image (or another 
canvas).

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [next] | [standalone]

#26773

In comp.lang.javascript message <d9b67bb2-7621-4fcf-ac46-dc41636aefb2@go
oglegroups.com>, Sat, 31 Jan 2015 11:19:12, catebekensail@yahoo.com
posted:

>Perhaps this is a question better asked in an html group, but I'm going
>with you guys.  Most of the examples I see are javascript/jquery.  You
>should know.
>
>I have a huge image and I want to point out various areas as users
>click around.  Say the image is a car.  If the user clicks a TIRE link,
>a round circle will be drawn around the tire.

I know of no better shape for a circle.

>That looks doable.  This is the question.  If the user now click
>HEADLIGHTS can I some how restore the TIRE area to normal (redraw the
>original image pixels under the circle) without an entire repaint?

You can save the whole of the canvas, before the circle is drawn, as a
(compressed?) bit-pattern; and, I suppose, you can reload it.  That will
be a repaint, but not a recalculate.  You may be able to do that to part
of a canvas.

A circle overlaid on a picture may in places not contrast with the
picture.  If you can XOR the circle with the original picture, you can
re-XOR the circle to erase it.

-- 
 (c) John Stockton, nr London, UK.   E-mail, see Home Page.    Turnpike v6.05.
 Website  <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
 PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
 Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

[toc] | [prev] | [next] | [standalone]

#26787

On Sun, 1 Feb 2015 20:08:13 +0000, Dr J R Stockton wrote:

> A circle overlaid on a picture may in places not contrast with the
> picture.  If you can XOR the circle with the original picture, you can
> re-XOR the circle to erase it.

This is indeed an elegant solution to the unstated problem of the drawing
colour having poor contrast against the existing contents of the canvas.

But does SVG have a drawing method that can combine the new object with
previously-rendered canvas values? Or does one need to re-compute or
alternatively "read back" the current canvas state within the area of
interest?

-- 
http://pages.videotron.com/duffym/index.htm

[toc] | [prev] | [next] | [standalone]

#26809

In comp.lang.javascript message <mascd6$7il$1@dont-email.me>, Wed, 4 Feb
2015 00:58:38, Mike Duffy <md_004@videotron.ca> posted:

>On Sun, 1 Feb 2015 20:08:13 +0000, Dr J R Stockton wrote:
>
>> A circle overlaid on a picture may in places not contrast with the
>> picture.  If you can XOR the circle with the original picture, you can
>> re-XOR the circle to erase it.
>
>This is indeed an elegant solution to the unstated problem of the drawing
>colour having poor contrast against the existing contents of the canvas.

Yes.  But it is not an absolutely new invention.

>But does SVG have a drawing method that can combine the new object with
>previously-rendered canvas values? Or does one need to re-compute or
>alternatively "read back" the current canvas state within the area of
>interest?

That raises two questions.  Does the OP use SVG, and do I use SVG?  I
think I do not - I use the canvas element, and cannot recall seeing
provision for XOR in it.

Someone should suggest to WHATWG that the method strokeStyle should
accept an argument "xor" for this purpose.

-- 
 (c) John Stockton, nr London UK        Reply address via Merlyn Home Page.
   news:comp.lang.javascript FAQ <http://www.jibbering.com/faq/index.html>.
   <http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
   <http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[toc] | [prev] | [next] | [standalone]

#26810

On Thu, 5 Feb 2015 23:16:09 +0000, Dr J R Stockton wrote:

> That raises two questions.  Does the OP use SVG, and do I use SVG? 

Sorry, it has been a while since I did some SVG graphics, and I
mis-remembered "canvas" as being part of the SVG specification. (i.e. the
area (width & height) specified in the root xml tag).

As you have pointed out, these are 2 distinct graphics methodologies. 


> Someone should suggest to WHATWG that the method strokeStyle should
> accept an argument "xor" for this purpose.

Yes. Also that one argument can be the currently-rendered existing pixel
value. As well as one should be able to explicitely specify the arguments
for the XOR operation.

-- 
http://pages.videotron.com/duffym/index.htm

[toc] | [prev] | [next] | [standalone]

#26811

On Thursday, February 5, 2015 at 6:41:25 PM UTC-6, Dr J R Stockton wrote:
> Someone should suggest to WHATWG that the method strokeStyle should
> accept an argument "xor" for this purpose.

or... take a look at the "globalCompositeOperation" property:

<https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing>

options include: 

source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, copy, xor,  multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity

[toc] | [prev] | [next] | [standalone]

#26812

On Thu, 5 Feb 2015 20:32:34 -0800 (PST), Michael Haufe (TNO) wrote:

> or... take a look at the "globalCompositeOperation" property:
> 
> <https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing>

Goodness. I had no idea that there were so many available drawing
operations.

But for the original poster, it looks like "Clipping paths" described near
the bottom of the page you refernced would do a better job.  (Drawing and
then hiding a particular shape.)

-- 
http://pages.videotron.com/duffym/index.htm

[toc] | [prev] | [next] | [standalone]

#26774

On Saturday, January 31, 2015 at 1:19:25 PM UTC-6, catebe...@yahoo.com wrote:
> Perhaps this is a question better asked in an html group, but I'm going with you guys.  Most of the examples I see are javascript/jquery.  You should know.
> 
> I have a huge image and I want to point out various areas as users click around.  Say the image is a car.  If the user clicks a TIRE link, a round circle will be drawn around the tire.
> 
> That looks doable.  This is the question.  If the user now click HEADLIGHTS can I some how restore the TIRE area to normal (redraw the original image pixels under the circle) without an entire repaint?
> 
> Thanks in advance.

Take a glance at the MDN tutorial:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web