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

Groups > comp.lang.javascript > #28304

Take screenshot and download canvas rendering?

Show all headers | View raw

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>

Back to comp.lang.javascript | Previous | Next — Next 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