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

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

Full, or fuller, Transparency?

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

Contents

  Full, or fuller, Transparency? dr.j.r.stockton@gmail.com - 2019-10-26 11:17 -0700
    Re: Full, or fuller, Transparency? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-10-26 16:39 -0700
      Re: Full, or fuller, Transparency? dr.j.r.stockton@gmail.com - 2019-10-27 08:25 -0700

#37626 — Full, or fuller, Transparency?

This work is for authoring time, Windows 10, Firefox; I want to use an existing image to guide my coded drawing on a CANVAS, without it becoming a permanent part of the drawing.

I have image files - in the present case, PNGs - and I have HTML pages containing CANVAS elements.  They all have white backgrounds (easily alterable for the CANVAS, including to "transparent").

What I would really like to do is to make the background of the CANVAS, but not the drawing on it, super-transparent, so that I can see in that region right through the window to the underlying window[s] (or desktop) underneath, which would show one of those PNGs underneath.  Then I could use the PNG as a guide while composing on the CANVAS.  As expected, and tested, I can make the background transparent, but not super-transparent; and I cannot make the page in which the CANVAS lies transparent itself.  N.B. "I cannot" != "It is impossible to".

I suppose I could display a PNG in the page as usual, make the background of the CANVAS transparent, and make the CANVAS draggable over the PNG - perhaps putting the drag X & Y distances into INPUT TYPE=TEXT elements so that they would be remembered by Firefox on page reload.


The drawing on the CANVAS is predominantly lines in the X & Y directions, and fills of those shapes.  One of the current PNGs is like that; the other is likewise but rotated by about 14 degrees.  It appears that I can un-rotate that PNG by simultaneously skewing it by +14 deg horizontal and -14 deg vertical (the loss of quality is unimportant).  Or I could temporarily use CTX.rotate(Math.PI*14/180) or similar in the CANVAS (and tilt my head to compensate).


Any recommendations, better suggestions, or other comments?


-- 
  (c) John Stockton, near London, UK.  Using Google Groups.           |
 Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |

[toc] | [next] | [standalone]

#37628

On Saturday, October 26, 2019 at 1:17:20 PM UTC-5, dr.j.r...@gmail.com wrote:
> This work is for authoring time, Windows 10, Firefox; I want to use an existing image to guide my coded drawing on a CANVAS, without it becoming a permanent part of the drawing.
> 
> I have image files - in the present case, PNGs - and I have HTML pages containing CANVAS elements.  They all have white backgrounds (easily alterable for the CANVAS, including to "transparent").
> 
> What I would really like to do is to make the background of the CANVAS, but not the drawing on it, super-transparent, so that I can see in that region right through the window to the underlying window[s] (or desktop) underneath, which would show one of those PNGs underneath.  Then I could use the PNG as a guide while composing on the CANVAS.  As expected, and tested, I can make the background transparent, but not super-transparent; and I cannot make the page in which the CANVAS lies transparent itself.  N.B. "I cannot" != "It is impossible to".
> 
> I suppose I could display a PNG in the page as usual, make the background of the CANVAS transparent, and make the CANVAS draggable over the PNG - perhaps putting the drag X & Y distances into INPUT TYPE=TEXT elements so that they would be remembered by Firefox on page reload.
> 
> 
> The drawing on the CANVAS is predominantly lines in the X & Y directions, and fills of those shapes.  One of the current PNGs is like that; the other is likewise but rotated by about 14 degrees.  It appears that I can un-rotate that PNG by simultaneously skewing it by +14 deg horizontal and -14 deg vertical (the loss of quality is unimportant).  Or I could temporarily use CTX.rotate(Math.PI*14/180) or similar in the CANVAS (and tilt my head to compensate).
> 
> 
> Any recommendations, better suggestions, or other comments?


Is this what you're trying to do?

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

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

#37630

On Sunday, 27 October 2019 00:39:38 UTC+1, Michael Haufe (TNO)  wrote:
> On Saturday, October 26, 2019 at 1:17:20 PM UTC-5, dr.j.r...@gmail.com wrote:
> > This work is for authoring time, Windows 10, Firefox; I want to use an existing image to guide my coded drawing on a CANVAS, without it becoming a permanent part of the drawing.

> Is this what you're trying to do?
> 
> <https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Example_A_simple_line_graph>

It contains sufficient clues.  Thanks.

Now I need to adapt the chronological order of my existing drawing, to get the right part on top.




I recently posted a function
   Sinuous (Hue,  [,], [,], [,], [,], [,], ...  [,] )
which now is
   Sinuous (Hue, [[,], [,], [,], [,], [,], ...  [,]])
which makes it easy to fill a path and to stroke it later.
The necessary change to the code of the function is trivial.

-- 
  (c) John Stockton, near London, UK.  Using Google Groups.           |
 Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |

[toc] | [prev] | [standalone]

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

csiph-web