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

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

Take screenshot and download canvas rendering?

Started byjonas.thornvall@gmail.com
First post2015-07-06 07:08 -0700
Last post2015-07-06 07:44 -0700
Articles 3 — 2 participants

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

Contents

  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

#28304 — Take screenshot and download canvas rendering?

Fromjonas.thornvall@gmail.com
Date2015-07-06 07:08 -0700
SubjectTake screenshot and download canvas rendering?
Message-ID<dfcdbc0b-792d-457d-922d-e685417f24f7@googlegroups.com>
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>

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)
   {
      if (arr[i])
      {
         for (var j = i * i; j < upperLimit; j += i)
         {
            arr[j] = false;
            arr[ - j] = false;
         }
      }
      i ++ ;
   }
   return arr;
}


function main()
{

  
   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>

[toc] | [next] | [standalone]

#28306

FromJohn Harris <niam@jghnorth.org.uk.invalid>
Date2015-07-06 15:38 +0100
Message-ID<tm4lpah5a4oq57gh2ih2i338g6ivt2c42f@4ax.com>
In reply to#28304
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

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

#28307

Fromjonas.thornvall@gmail.com
Date2015-07-06 07:44 -0700
Message-ID<0c488ce4-e02c-47ec-b39c-9b787c20931b@googlegroups.com>
In reply to#28306
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 ;)

[toc] | [prev] | [standalone]

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

csiph-web