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


Groups > comp.lang.javascript > #28307

Re: Take screenshot and download canvas rendering?

Newsgroups comp.lang.javascript
Date 2015-07-06 07:44 -0700
References <dfcdbc0b-792d-457d-922d-e685417f24f7@googlegroups.com> <tm4lpah5a4oq57gh2ih2i338g6ivt2c42f@4ax.com>
Message-ID <0c488ce4-e02c-47ec-b39c-9b787c20931b@googlegroups.com> (permalink)
Subject Re: Take screenshot and download canvas rendering?
From jonas.thornvall@gmail.com

Show all headers | View raw


Den måndag 6 juli 2015 kl. 16:38:52 UTC+2 skrev John Harris:
> On Mon, 6 Jul 2015 07:08:59 -0700 (PDT), jonas.thornvall@gmail.com
> wrote:
> 
> >I can not make it work?
> >Maybe i misunderstood the example, i found.
> >
> ><!DOCTYPE HTML>
> ><html>
> >  <head>
> >    <style>
> >      body {
> >        margin: 0px;
> >        padding: 0px;
> >      }
> >    </style>
> >  </head>
> >  <body><P>
> ><table width=800>
> ><th align middle>
> >Fill<input type="checkbox" name="fill" id="fillid" onchange=main(); >
> > Select start multiple of prime:<input id="multiple" onchange=main(); value="1" name="test" type="text"></input>
> ></th>
> ></table>
> ><a href="%dataURL%" download>download</a>
> >    <canvas id="myCanvas" width="0" height="0"></canvas>
> >    <script>
> 
> var wi, hi;   // ...
> var arr;      // ...
> 
> >
> >function isPrime()
> >{
> >   // Eratosthenes algorithm to find all primes under n
> >   upperLimit = wi;
> >   for (var i = 0; i < upperLimit; ++ i)
> >   {
> >      arr[i] = true;
> >
> >   }
> >   // Make an array from 2 to (n - 1)
> >   arr[0] = false;
> >   arr[1] = true;
> >
> >   // Remove multiples of primes starting from 2, 3, 5, ...
> >   i = 2;
> >   while (i <= upperLimit - 1)
> 
>     while (i < upperLimit)
> 
> >   {
> >      if (arr[i])
> >      {
> >         for (var j = i * i; j < upperLimit; j += i)
> >         {
> >            arr[j] = false;
> >            arr[ - j] = false;
> >         }
> >      }
> >      i ++ ;
> >   }
> >   return arr;
> >}
> >
> >
> >function main()
> >{
> 
>     var old; 
>     var rad, oldrad;
>     var dia, offset, fill;
>     var x, y;
>     var i, mult;
> >
> >  
> >   arr = [];
> >   var canvas = document.getElementById('myCanvas');
> >   var context = canvas.getContext('2d');
> >   var canvas = document.getElementsByTagName('canvas')[0];
> >  
> >  
> >   canvas.width  = screen.width*2;
> >   canvas.height = screen.height*2;
> >     wi = canvas.width/2;
> > hi = canvas.height/2;
> >   old = "";
> >   isPrime();
> >   y = "BLACK";
> >   x = 16;
> >   rad = 128 / x;
> >   dia = 2 * rad;
> >   oldrad = 0;
> >   offset = 0;
> >   fill = true;
> >  for(i = wi-100; i >= 0; i -- )
> >     {
> >      if(arr[i] == true)
> >      {
> >         mult = 1;
> >
> >         while(dia * i * mult <= wi-100)
> >         {
> >            offset = rad * i - oldrad + offset;
> >            var radius = (i * rad);
> >            oldrad = radius;
> >            //var centerX =  50 + dia * i * mult - offset;
> >            var centerX =  50 + dia * i * mult;
> >            var centerY = 500;
> >            context.beginPath();
> >            fill = document.getElementById('fillid').checked;
> >            z = document.getElementById('multiple').value;
> >            if(mult > z)
> >            {
> >               if ( ! fill)
> >               {
> >                  context.rect(centerX,centerY-radius,radius*2,radius*2);
> >                  //context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
> >
> >               }
> >               else
> >               {
> >                 // context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
> >                  context.rect(centerX,centerY-radius,radius*2,radius*2);
> >                  context.fillStyle = y;
> >                  context.fill();
> >               }
> >               context.stroke();
> >               context.closePath();
> >
> >            }
> >            
> >          if(y == "black")
> >         {
> >            y = "yellow"
> >         }
> >         else
> >         {
> >            y = "black";
> >         }
> >      
> >            mult ++ ;
> >         }
> >     
> >       if(y == "black")
> >         {
> >            y = "yellow"
> >         }
> >         else
> >         {
> >            y = "black";
> >         }
> >      
> >          
> >      }
> >     
> > 
> > }
> >dataURL = myCanvas.toDataURL("png");
> >}
> >main();
> >
> >
> >
> >    </script>
> >
> >  </body>
> ></html>
> 
>   John

Not quite the answer to question but thanks anyway ;)

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread


Thread

Take screenshot and download canvas rendering? jonas.thornvall@gmail.com - 2015-07-06 07:08 -0700
  Re: Take screenshot and download canvas rendering? John Harris <niam@jghnorth.org.uk.invalid> - 2015-07-06 15:38 +0100
    Re: Take screenshot and download canvas rendering? jonas.thornvall@gmail.com - 2015-07-06 07:44 -0700

csiph-web