After experimenting with composite operations and drawing images on the canvas I&#39;m now trying to remove images and compositing. How do I do this?

I need to clear the canvas for redrawing other images; this can go on for a while so I don&#39;t think drawing a new rectangle every time will be the most efficient option.

How to clear the canvas for redrawing

What is the best approach for creating elements on the fly and being able to move them around? For example, let&#39;s say I want to create a rectangle, circle and polygon and then select those objects and move them around.

I understand that HTML5 provides three elements that can make this possible: [svg][1], [canvas][2] and [div][3]. For what I want to do, which one of those elements will provide the best performance?

To compare these approaches, I was thinking of creating three visually identical web pages that each have a header, footer, widget and text content in them. The widget in the first page would be created entirely with the `canvas` element, the second entirely with the `svg` element, and the third with the plain `div` element, HTML and CSS.

  [1]: http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#svg
  [2]: http://www.w3.org/TR/2014/REC-html5-20141028/scripting-1.html#the-canvas-element
  [3]: http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-div-element

HTML5 Canvas vs. SVG vs. div

How can I automatically scale the HTML5 `&lt;canvas&gt;` element to fit the page?

For example, I can get a `&lt;div&gt;` to scale by setting the `height` and `width` properties to 100%, but a `&lt;canvas&gt;` won&#39;t scale, will it?

Resize HTML5 canvas to fit window

I&#39;m working on a generative art project where I would like to allow users to save the resulting images from an algorithm. The general idea is:

* Create an image on an HTML5 Canvas using a generative algorithm
* When the image is completed, allow users to save the canvas as an image file to the server
* Allow the user to either download the image or add it to a gallery of pieces of produced using the algorithm.

However, I’m stuck on the second step. After some help from Google, I found this [blog post][1], which seemed to be exactly what I wanted:



Which led to the JavaScript code:

    function saveImage() {
      var canvasData = canvas.toDataURL(&quot;image/png&quot;);
      var ajax = new XMLHttpRequest();
      
      ajax.open(&quot;POST&quot;, &quot;testSave.php&quot;, false);
      ajax.onreadystatechange = function() {
        console.log(ajax.responseText);
      }
      ajax.setRequestHeader(&quot;Content-Type&quot;, &quot;application/upload&quot;);
      ajax.send(&quot;imgData=&quot; + canvasData);
    }

and corresponding PHP (testSave.php):

    &lt;?php
    if (isset($GLOBALS[&quot;HTTP_RAW_POST_DATA&quot;])) {
      $imageData = $GLOBALS[&#39;HTTP_RAW_POST_DATA&#39;];
      $filteredData = substr($imageData, strpos($imageData, &quot;,&quot;) + 1);
      $unencodedData = base64_decode($filteredData);
      $fp = fopen(&#39;/path/to/file.png&#39;, &#39;wb&#39;);

      fwrite($fp, $unencodedData);
      fclose($fp);
    }
    ?&gt;

But this doesn’t seem to do anything at all.

More Googling turns up this [blog post][2] which is based off of the previous tutorial. Not very different, but perhaps worth a try:

    $data = $_POST[&#39;imgData&#39;];
    $file = &quot;/path/to/file.png&quot;;
    $uri = substr($data,strpos($data, &quot;,&quot;) + 1);
    
    file_put_contents($file, base64_decode($uri));
    echo $file;

This one creates a file (yay) but it’s corrupted and doesn’t seem to contain anything. It also appears to be empty (file size of 0).

Is there anything really obvious that I’m doing wrong? The path where I’m storing my file is writable, so that isn’t an issue, but nothing seems to be happening and I’m not really sure how to debug this.

### Edit

Following Salvidor Dali’s link I changed the AJAX request to be:

    function saveImage() {
      var canvasData = canvas.toDataURL(&quot;image/png&quot;);
      var xmlHttpReq = false;
      
      if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
      }
      else if (window.ActiveXObject) {
        ajax = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
      }
      
      ajax.open(&quot;POST&quot;, &quot;testSave.php&quot;, false);
      ajax.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;);
      ajax.onreadystatechange = function() {
        console.log(ajax.responseText);
      }
      ajax.send(&quot;imgData=&quot; + canvasData);
    }

And now the image file is created and isn’t empty! It seems as if the content type matters and that changing it to `x-www-form-urlencoded` allowed the image data to be sent.

The console returns the (rather large) string of base64 code and the datafile is ~140 kB. However, I still can’t open it and it seems to not be formatted as an image.


  [1]: http://permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/
  [2]: http://www.kevinsookocheff.com/2011/07/27/saving-canvas-data-to-an-image-file-with-javascript-and-php/

How to save an HTML5 Canvas as an image on a server?

I want to save my canvas to a `img`. I have this function:

    function save() {
        document.getElementById(&quot;canvasimg&quot;).style.border = &quot;2px solid&quot;;
        var dataURL = canvas.toDataURL();
        document.getElementById(&quot;canvasimg&quot;).src = dataURL;
        document.getElementById(&quot;canvasimg&quot;).style.display = &quot;inline&quot;;
    }

It gives me error:

&gt;  Uncaught SecurityError: Failed to execute &#39;toDataURL&#39; on &#39;HTMLCanvasElement&#39;: Tainted canvases may not be exported.

What should I do?

Tainted canvases may not be exported

I&#39;m using Nihilogic&#39;s &quot;Canvas2Image&quot; JavaScript tool to convert canvas drawings to PNG images. 
What I need now is to turn those base64 strings that this tool generates, into actual PNG files on the server, using PHP.

In short, what I&#39;m currently doing is to generate a file on the client side using Canvas2Image, then retrieve the base64-encoded data and send it to the server using AJAX:

    // Generate the image file
    var image = Canvas2Image.saveAsPNG(canvas, true);	
    
    image.id = &quot;canvasimage&quot;;
    canvas.parentNode.replaceChild(image, canvas);
    								
    var url = &#39;hidden.php&#39;,
    data = $(&#39;#canvasimage&#39;).attr(&#39;src&#39;);
    
    $.ajax({ 
        type: &quot;POST&quot;, 
    	url: url,
    	dataType: &#39;text&#39;,
    	data: {
    		base64data : data
    	}
    });

At this point, &quot;hidden.php&quot; receives a data block that looks like ***data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABE...***

From this point on, I&#39;m pretty much stumped. From what I&#39;ve read, I believe that I&#39;m supposed to use PHP&#39;s *imagecreatefromstring* function, but I&#39;m not sure how to actually create an actual PNG image from the base64-encoded string and store it on my server.
Please aid!
	

How to save a PNG image server-side, from a base64 data URI

I want to have a web page which has one centered word. 

I want this word to be drawn with an animation, such that the page &quot;writes&quot; the word out the same way that we would, i.e. it starts at one point and draws lines and curves over time such that the end result is a glyph. 

I do not care if this is done with `&lt;canvas&gt;` or the DOM, and I don&#39;t care whether it&#39;s done with JavaScript or CSS. The absence of jQuery would be nice, but not required.

How can I do this? I&#39;ve searched *exhaustively* with no luck.

How can I animate the drawing of text on a web page?

Digital camera photos are often saved as JPEG with an EXIF &quot;orientation&quot; tag. To display correctly, images need to be rotated/mirrored depending on which orientation is set, but browsers ignore this information rendering the image. Even in large commercial web apps, support for EXIF orientation can be spotty [1]. The same source also provides a nice summary of the __8 different orientations__  a JPEG can have:

![Summary of EXIF Orientations](https://i.stack.imgur.com/6cJTP.gif)

Sample images are available at [4]. 

__The question is how to rotate/mirror the image on the client side so that it displays correctly and can be further processed if necessary?__

There are JS libraries available to parse EXIF data, including the orientation attribute [2]. Flickr noted possible performance problem when parsing large images, requiring use of webworkers [3].

Console tools can correctly re-orient the images [5]. A PHP script solving the problem is available at [6]

[1]: http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/
[2]: https://github.com/jseidelin/exif-js
[3]: http://code.flickr.net/2012/06/01/parsing-exif-client-side-using-javascript-2/
[4]: http://www.galloway.me.uk/2012/01/uiimageorientation-exif-orientation-sample-images/
[5]: https://superuser.com/questions/36645/how-to-rotate-images-automatically-based-on-exif-data
[6]: http://www.neilyoungcv.com/blog/code-share/image-resizing-with-php-exif-orientation-fix/

JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

I use html5 canvas elements to resize images im my browser. It turns out that the quality is very low. I found this: https://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas but it does not help to increase the quality.

Below is my css and js code as well as the image scalled with Photoshop and scaled in the canvas API. 

**What do I have to do to get optimal quality when scaling an image in the browser?**

Note: I want to scale down a large image to a small one, modify color in a canvas and send the result from the canvas to the server.

CSS: 

    canvas, img {
        image-rendering: optimizeQuality;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
        -ms-interpolation-mode: nearest-neighbor;
    }

JS: 

    var $img = $(&#39;&lt;img&gt;&#39;);
    var $originalCanvas = $(&#39;&lt;canvas&gt;&#39;);
    $img.load(function() {
    
    
       var originalContext = $originalCanvas[0].getContext(&#39;2d&#39;);   
       originalContext.imageSmoothingEnabled = false;
       originalContext.webkitImageSmoothingEnabled = false;
       originalContext.mozImageSmoothingEnabled = false;
       originalContext.drawImage(this, 0, 0, 379, 500);
    });

The image resized with photoshop:

![enter image description here][1]

The image resized on canvas:

![enter image description here][2]


Edit: 

I tried to make downscaling in more than one steps as proposed in:

https://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas and
https://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing


This is the function I have used: 

    function resizeCanvasImage(img, canvas, maxWidth, maxHeight) {
    	var imgWidth = img.width, 
    		imgHeight = img.height;
    		
    	var ratio = 1, ratio1 = 1, ratio2 = 1;
    	ratio1 = maxWidth / imgWidth;
    	ratio2 = maxHeight / imgHeight;
    	
    	// Use the smallest ratio that the image best fit into the maxWidth x maxHeight box.
    	if (ratio1 &lt; ratio2) {
    		ratio = ratio1;
    	}
    	else {
    		ratio = ratio2;
    	}
    
    	var canvasContext = canvas.getContext(&quot;2d&quot;);
    	var canvasCopy = document.createElement(&quot;canvas&quot;);
    	var copyContext = canvasCopy.getContext(&quot;2d&quot;);
    	var canvasCopy2 = document.createElement(&quot;canvas&quot;);
    	var copyContext2 = canvasCopy2.getContext(&quot;2d&quot;);
    	canvasCopy.width = imgWidth;
    	canvasCopy.height = imgHeight;	
    	copyContext.drawImage(img, 0, 0);
    
    	// init
    	canvasCopy2.width = imgWidth;
    	canvasCopy2.height = imgHeight;        
    	copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);
    
    	
    	var rounds = 2;
    	var roundRatio = ratio * rounds;
    	for (var i = 1; i &lt;= rounds; i++) {
    		console.log(&quot;Step: &quot;+i);
    		
    		// tmp
    		canvasCopy.width = imgWidth * roundRatio / i;
    		canvasCopy.height = imgHeight * roundRatio / i;
    		
    		copyContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvasCopy.width, canvasCopy.height);
    
    		// copy back
    		canvasCopy2.width = imgWidth * roundRatio / i;
    		canvasCopy2.height = imgHeight * roundRatio / i;
    		copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);
    
    	} // end for
    	
    	
    	// copy back to canvas
    	canvas.width = imgWidth * roundRatio / rounds;
    	canvas.height = imgHeight * roundRatio / rounds;
    	canvasContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvas.width, canvas.height);
    
    	
    }

Here is the result if I use a 2 step down sizing: 

![enter image description here][3]

Here is the result if I use a 3 step down sizing: 

![enter image description here][4]

Here is the result if I use a 4 step down sizing: 

![enter image description here][5]

Here is the result if I use a 20 step down sizing: 

![enter image description here][6]

Note: It turns out that from 1 step to 2 steps there is a large improvement in image quality but the more steps you add to the process the more fuzzy the image becomes.

**Is there a way to solve the problem that the image gets more fuzzy the more steps you add?**  

Edit 2013-10-04: I tried the algorithm of GameAlchemist. Here is the result compared to Photoshop.

PhotoShop Image: 

![PhotoShop Image][7]  

GameAlchemist&#39;s Algorithm:

![GameAlchemist&#39;s Algorithm][8]


  [1]: http://i.stack.imgur.com/Vt7KT.jpg
  [2]: http://i.stack.imgur.com/HJhLY.jpg
  [3]: http://i.stack.imgur.com/eH3Oe.png
  [4]: http://i.stack.imgur.com/Y1qXz.png
  [5]: http://i.stack.imgur.com/OW5bw.png
  [6]: http://i.stack.imgur.com/XTN9v.png
  [7]: http://i.stack.imgur.com/VaO8s.jpg
  [8]: http://i.stack.imgur.com/YOsTL.jpg

HTML5 Canvas Resize (Downscale) Image High Quality?

My code is working very well on my localhost but it is not working on the site.

I got this error from the console, for this line `.getImageData(x,y,1,1).data`:

    Uncaught SecurityError: Failed to execute &#39;getImageData&#39; on &#39;CanvasRenderingContext2D&#39;: The canvas has been tainted by cross-origin data. 

part of my code:

	

    jQuery.Event.prototype.rgb=function(){
    		var x =  this.offsetX || (this.pageX - $(this.target).offset().left),y =  this.offsetY || (this.pageY - $(this.target).offset().top);
    		if (this.target.nodeName!==&quot;CANVAS&quot;)return null;
    		return this.target.getContext(&#39;2d&#39;).getImageData(x,y,1,1).data;
    	}


**Note:** my image url (src) is from a subdomain url

How to fix getImageData() error The canvas has been tainted by cross-origin data?

For a drawing application, I&#39;m saving the mouse movement coordinates to an array then drawing them with lineTo.  The resulting line is not smooth.  How can I produce a single curve between all the gathered points?    

I&#39;ve googled but I have only found 3 functions for drawing lines: For 2 sample points, simply use `lineTo`.  For 3 sample points `quadraticCurveTo`, for 4 sample points, `bezierCurveTo`.  

(I tried drawing a `bezierCurveTo` for every 4 points in the array, but this leads to kinks every 4 sample points, instead of a continuous smooth curve.)

How do I write a function to draw a smooth curve with 5 sample points and beyond?  

how to draw smooth curve through N points using javascript HTML5 canvas?

I&#39;ve been trying to change what seems to be the default background color of my canvas from black to transparent / any other color - but no luck.

My HTML:

    &lt;canvas id=&quot;canvasColor&quot;&gt;

My CSS:

    &lt;style type=&quot;text/css&quot;&gt;
    #canvasColor {
     z-index: 998;
    opacity:1;
    background: red;
    }
    &lt;/style&gt;

As you can see in the following online example I have some animation appended to the canvas, so cant just do a opacity: 0; on the id.

Live preview:
http://devsgs.com/preview/test/particle/

Any ideas how to overwrite the default black?

Changing three.js background to transparent or other color

Is there any reason, except performance, for using WebGL instead of 2D-Canvas for **2D** games/apps?

In other word what 2D functionalities are offered by WebGL which are not possible to achieve easily with 2D-Canvas?

Is there any reason for using WebGL instead of 2D Canvas for 2D games/apps?

I&#39;m trying to draw with the mouse over a HTML5 canvas, but the only way that it seems to work well is if the canvas is in the position 0,0 (upper left corner) if I change the canvas position, for some reason it doesn&#39;t draw like it should. Here is my code.

     function createImageOnCanvas(imageId){
        document.getElementById(&quot;imgCanvas&quot;).style.display = &quot;block&quot;;
        document.getElementById(&quot;images&quot;).style.overflowY= &quot;hidden&quot;;
        var canvas = document.getElementById(&quot;imgCanvas&quot;);
        var context = canvas.getContext(&quot;2d&quot;);
        var img = new Image(300,300);
        img.src = document.getElementById(imageId).src;
        context.drawImage(img, (0),(0));
    }

    function draw(e){
        var canvas = document.getElementById(&quot;imgCanvas&quot;);
        var context = canvas.getContext(&quot;2d&quot;);
        posx = e.clientX;
        posy = e.clientY;
        context.fillStyle = &quot;#000000&quot;;
        context.fillRect (posx, posy, 4, 4);
    }

**The HTML part**

     &lt;body&gt;
     &lt;div id=&quot;images&quot;&gt;
     &lt;/div&gt;
     &lt;canvas onmousemove=&quot;draw(event)&quot; style=&quot;margin:0;padding:0;&quot; id=&quot;imgCanvas&quot;
              class=&quot;canvasView&quot; width=&quot;250&quot; height=&quot;250&quot;&gt;&lt;/canvas&gt; 


I have read there&#39;s a way of creating a simple function in JavaScript to get the right position, but I have no idea about how to do it. 

Real mouse position in canvas

I&#39;d like to rotate photos based on their original rotation, as set by the camera in JPEG EXIF image data. The trick is that all this should happen in the browser, using JavaScript and `&lt;canvas&gt;`.

How could JavaScript access JPEG, a local file API object, local `&lt;img&gt;` or remote `&lt;img&gt;`, EXIF data to read the rotation information?

Server-side answers are not OK; I am looking for **a client-side** solution. 


Accessing JPEG EXIF rotation data in JavaScript on the client side

I&#39;m trying to resize some images with canvas but I&#39;m clueless on how to smoothen them.
On photoshop, browsers etc.. there are a few algorithms they use (e.g. bicubic, bilinear) but I don&#39;t know if these are built into canvas or not.

Here&#39;s my fiddle: http://jsfiddle.net/EWupT/

    var canvas = document.createElement(&#39;canvas&#39;);
    var ctx = canvas.getContext(&#39;2d&#39;);
    canvas.width=300
    canvas.height=234
    ctx.drawImage(img, 0, 0, 300, 234);
    document.body.appendChild(canvas);

The first one is a normal resized image tag, and the second one is canvas. Notice how the canvas one is not as smooth. How can I achieve &#39;smoothness&#39;?

Resize image with javascript canvas (smoothly)

I am trying to stack two canvas together and make it a double layers canvas.

I&#39;ve saw an example here:

    &lt;div style=&quot;position: relative;&quot;&gt;
     &lt;canvas id=&quot;layer1&quot; width=&quot;100&quot; height=&quot;100&quot; 
       style=&quot;position: absolute; left: 0; top: 0; z-index: 0;&quot;&gt;&lt;/canvas&gt;
     &lt;canvas id=&quot;layer2&quot; width=&quot;100&quot; height=&quot;100&quot; 
       style=&quot;position: absolute; left: 0; top: 0; z-index: 1;&quot;&gt;&lt;/canvas&gt;
    &lt;/div&gt;
But i would like to set both of the canvas align at the center of the screen. If i set the value of `left` as a constant, while I change the orientation of the screen (as I&#39;m doing aps on iPad) the canvas won&#39;t remain at the middle of the screen like how it act in 

    &lt;div align=&quot;center&quot;&gt;

Can anyone help,  please?

How to align absolutely positioned element to center?

Why should I use requestAnimationFrame rather than setTimeout or setInterval?

This self-answered question is a documentation example.

Why is requestAnimationFrame better than setInterval or setTimeout

I have a form that allows a user to upload an image.

Once the image is loaded, we perform some scaling on it in order to reduce its filesize before we pass it back to the server.

To do this, we place it on the canvas and manipulate it there.

This code will render the scaled image on the canvas, with the canvas of size 320 x 240px:
   
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

... where canvas.width and canvas.height is the image height and width x a scaling factor based on the size of the original image.

But when I go to use the code: 

    ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height

... I only get part of the image on the canvas, in this case the top left corner. I need the whole image &#39;scaled&#39; to fit on the canvas, despite the actual image size being larger than the 320x240 canvas size.

So for the code above, the width and heights are 1142x856, as that is the final image size. I need to maintain that size to pass beck to the server when the form is submitted, but only want a smaller view of it to appear in the canvas for the user.

What am I missing here? Can anyone point me in the right direction please?

Many thanks in advance.

Scaling an image to fit on canvas

I am a total *n00b* with `HTML5` and am working with the `canvas` to render shapes, colors, and text. In my app, I have a *view adapter* that creates a canvas dynamically, and fills it with content. This works really nicely, except that my text is rendered very fuzzy/blurry/stretched. I have seen a lot of other posts on why defining the *width* and *height* in `CSS` will cause this issue, but I define it all in `javascript`.

The relevant code (view [Fiddle][1]):

&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    var width  = 500;//FIXME:size.w;
    var height = 500;//FIXME:size.h;
    	
    var canvas = document.createElement(&quot;canvas&quot;);
    //canvas.className=&quot;singleUserCanvas&quot;;
    canvas.width=width;
    canvas.height=height;
    canvas.border = &quot;3px solid #999999&quot;;
    canvas.bgcolor = &quot;#999999&quot;;
    canvas.margin = &quot;(0, 2%, 0, 2%)&quot;;
    	
    var context = canvas.getContext(&quot;2d&quot;);

    //////////////////
    ////  SHAPES  ////
    //////////////////
    	
    var left = 0;

    //draw zone 1 rect
    context.fillStyle = &quot;#8bacbe&quot;;
    context.fillRect(0, (canvas.height*5/6)+1, canvas.width*1.5/8.5, canvas.height*1/6);

    left = left + canvas.width*1.5/8.5;

    //draw zone 2 rect
    context.fillStyle = &quot;#ffe381&quot;;
    context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*2.75/8.5, canvas.height*1/6);

    left = left + canvas.width*2.75/8.5 + 1;

    //draw zone 3 rect
    context.fillStyle = &quot;#fbbd36&quot;;
    context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);

    left = left + canvas.width*1.25/8.5;

    //draw target zone rect
    context.fillStyle = &quot;#004880&quot;;
    context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*0.25/8.5, canvas.height*1/6);

    left = left + canvas.width*0.25/8.5;
    	
    //draw zone 4 rect
    context.fillStyle = &quot;#f8961d&quot;;
    context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);

    left = left + canvas.width*1.25/8.5 + 1;

    //draw zone 5 rect
    context.fillStyle = &quot;#8a1002&quot;;
    context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width-left, canvas.height*1/6);

    ////////////////
    ////  TEXT  ////
    ////////////////

    //user name
    context.fillStyle = &quot;black&quot;;
    context.font = &quot;bold 18px sans-serif&quot;;
    context.textAlign = &#39;right&#39;;
    context.fillText(&quot;User Name&quot;, canvas.width, canvas.height*.05);

    //AT:
    context.font = &quot;bold 12px sans-serif&quot;;
    context.fillText(&quot;AT: 140&quot;, canvas.width, canvas.height*.1);

    //AB:
    context.fillText(&quot;AB: 94&quot;, canvas.width, canvas.height*.15);
           
    //this part is done after the callback from the view adapter, but is relevant here to add the view back into the layout.
    var parent = document.getElementById(&quot;layout-content&quot;);
    parent.appendChild(canvas);

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;layout-content&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

The results I am seeing (in *Safari*) are much more skewed than shown in the Fiddle:

**Mine**

![Rendered output in Safari][2]

**Fiddle**

![Rendered output on JSFiddle][3]

What am I doing incorrectly? Do I need a separate canvas for each text element? Is it the font? Am I required to first define the canvas in the HTML5 layout? Is there a typo? I am lost.

  [1]: http://jsfiddle.net/65maD/
  [2]: http://i.stack.imgur.com/Dh51D.png
  [3]: http://i.stack.imgur.com/HuRUB.png

How do I fix blurry text in my HTML5 canvas?

I have been doing research on HTML canvas libraries and I came across this question. https://stackoverflow.com/questions/3474608/what-is-the-current-state-of-the-art-in-html-canvas-javascript-libraries-and-fra that was asked in 2010. The top answer was Fabric.js. After doing a bit more research I came across http://www.html5canvastutorials.com/ which features tutorials on KineticJs, that boasts having multiple canvases for speed. A bit more research later revealed that Canvas libraries seem to be all over the place when it comes to speed and features. What is the current state of JavaScript Canvas libraries and frameworks today? Has one come out on top?

EDIT: Since libraries are ever changing and a lot of people have recently been coming here for news and info on new libraries I changed the question to be more timeless.

Current State of Javascript Canvas Libraries?

Is there any way of reading the contents of a HTML Canvas as binary data?

At the moment I&#39;ve got the following HTML to show an input file and the canvas below it:

    &lt;p&gt;&lt;button id=&quot;myButton&quot; type=&quot;button&quot;&gt;Get Image Content&lt;/button&gt;&lt;/p&gt;
    &lt;p&gt;Input:&lt;input id=&quot;fileInput&quot; type=&quot;file&quot;/&gt;&lt;/p&gt;
    &lt;p&gt;Canvas&lt;canvas id=&quot;myCanvas&quot; width=&quot;578&quot; height=&quot;200&quot;/&gt;&lt;/p&gt;

I&#39;ve then setup my input file to set the canvas correctly which works fine:

    $(&#39;#fileInput&#39;).on(&#39;change&#39;, function() {
    	$.each(this.files, function() {
    		var image = new Image();
    			image.src = window.URL.createObjectURL(this);
    
    		image.onload = function() {
    		    $(&quot;canvas&quot;).drawImage({
    				source: image,
    				x: 50, y: 50,
    				width: 100,
    				fromCenter: false
    			});
    		};
    	});
    });

I now need to get the binary data (Base64 encoded) from the Canvas when the button is clicked so it&#39;ll push the data to the server...

The end result is that I need to provide the user with the ability to select a file, crop/resize it, and then click a button at which point the edited image will be uploaded to the server (I can&#39;t do server-side cropping/resizing due to server-side limitations...)

Any help would be great! Cheers

Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

    jQuery(&#39;#carregar&#39;).click(function() {
	  var canvas	= document.getElementById(&#39;canvas&#39;);
	  var image   = document.getElementById(&#39;image&#39;);
	  var element = canvas.getContext(&quot;2d&quot;);
	  element.clearRect(0, 0, canvas.width, canvas.height);
	  element.drawImage(image, 0, 0, 300, 300);
    });

[jsfiddle.net/braziel/nWyDE/](http://jsfiddle.net/braziel/nWyDE/)



I have a problem to rotate an image 90 &#176; to the right or to the left.

I use an image on the canvas, the same screen will have several canvas equal to that of the example, but I left it as close as possible to the project.

I ask, how do I rotate the image 90 &#176; to the left or right when I click &quot;Rotate Left&quot; and &quot;Rotate Right&quot;?

I tried several codes on the internet but none worked.


  [1]: http://jsfiddle.net/braziel/nWyDE/1/

HTML5 Canvas Rotate Image

I want to draw a grid as shown in the image but I totally don&#39;t have any idea where to begin.

Should I use **SVG** or should I use **Canvas** with **HTML5** and how do I draw on it?

I want this grid to draw rectangle, circle or other diagrams on it and I will calculate the area of that diagram like area of a square.

![grid][1]


  [1]: https://i.stack.imgur.com/f6vGv.png


How to draw grid using HTML5 and canvas or SVG

Please have a look at the following example:

http://jsfiddle.net/MLGr4/47/

    var canvas = document.getElementById(&quot;canvas&quot;);
    var ctx = canvas.getContext(&quot;2d&quot;);

    img = new Image();
    img.onload = function(){
        canvas.width = 400;
        canvas.height = 150;
        ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150);
    }
    img.src = &quot;http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg&quot;;

As you see, the image is not anti-aliased although it is said that drawImage applies anti aliasing automatically. I tried many different ways but it doesn&#39;t seem to work. Could you please tell me how I can get anti-aliased image?
Thanks.

Html5 canvas drawImage: how to apply antialiasing

The standard HTML file upload works as follows:

    &lt;g:form method=&quot;post&quot; accept-charset=&quot;utf-8&quot; enctype=&quot;multipart/form-data&quot;  
         name=&quot;form&quot; url=&quot;someurl&quot;&gt;
    
        &lt;input type=&quot;file&quot; name=&quot;file&quot; id=&quot;file&quot; /&gt;
    
    &lt;/form&gt;

In my case I loaded an image into a html5 canvas and want to submit it as a file to the server.
I can do:

    var canvas; // some canvas with an image
    var url = canvas.toDataURL();

This gives me a image/png as base64. 


**How can I send the base64 image to the server the same way it is done with the input type file?** 

The problem is that the base64 file is not of the same type as the file, which is inside the input type=&quot;file&quot;. 

**Can I convert the base64 that the types are the same for the server somehow?** 


Convert HTML5 Canvas into File to be uploaded?

I&#39;m working with canvas and its ImageData object which contains a huge amount of data (millions of integers). So working with a few arrays already takes a lot of memory (up to 300MB). Is there a way to free up the memory of some array when it&#39;s unnecessary? I&#39;m trying to assign `undefined` to that variable. Is it right?

How to free up the memory in JavaScript

I am currently using http://paperjs.org to create an HTML5 canvas drawing app. I want to let users upload images into the canvas. I know I need to make a login and signup but is there an easier way? I have seen the HTML5 drag and drop upload.

How to upload image into HTML5 canvas

I need a way to resize pictures in JavaScript without using a HTML element.

My mobile HTML app captures photos and then converts them to base64 strings. Thereafter I need to resize them before they are sent to the API in order to save storage space. 

I&#39;m looking for a different and more suitable way for resizing than using a canvas element, is there a way?

Resize a Base-64 image in JavaScript without using canvas

I am making a simple web app in mobile which allow visitor to capture photo by using html5 input[type=file] element. Then I will display it on the web for preview, and then visitor can choose to upload the photo to my server for other purpose(ie: upload to FB)

I find a problem on the orientation of photo when I take photo using my iPhone and hold vertically.The photo is in a correct orientation in &lt;img&gt; tag.
However, when I try to draw it into canvas by using drawImage() method, it is drawn 90 degree rotated.


I have tried to take photo in 4 orientations, only one of them can draw a correct image in canvas, others are rotated or even flipped upside down. 

Well, I am confused to get the correct orientation to fix this problem...
Thanks for helping...

here is my code, mostly copy from MDN

    &lt;div class=&quot;container&quot;&gt;
                &lt;h1&gt;Camera API&lt;/h1&gt;
    
                &lt;section class=&quot;main-content&quot;&gt;
                    &lt;p&gt;A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device&#39;s camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).&lt;/p&gt;
                    
                    &lt;p&gt;
    					&lt;form method=&quot;post&quot; enctype=&quot;multipart/form-data&quot; action=&quot;index.php&quot;&gt;
    						&lt;input type=&quot;file&quot; id=&quot;take-picture&quot; name=&quot;image&quot; accept=&quot;image/*&quot;&gt;
    						&lt;input type=&quot;hidden&quot; name=&quot;action&quot; value=&quot;submit&quot;&gt;
    						&lt;input type=&quot;submit&quot; &gt;
    					&lt;/form&gt;
                    &lt;/p&gt;
    
                    &lt;h2&gt;Preview:&lt;/h2&gt;
                    &lt;div style=&quot;width:100%;max-width:320px;&quot;&gt;
                        &lt;img src=&quot;about:blank&quot; alt=&quot;&quot; id=&quot;show-picture&quot; width=&quot;100%&quot;&gt;
                    &lt;/div&gt;
    
                    &lt;p id=&quot;error&quot;&gt;&lt;/p&gt;
    				&lt;canvas id=&quot;c&quot; width=&quot;640&quot; height=&quot;480&quot;&gt;&lt;/canvas&gt;
                &lt;/section&gt;
    
            &lt;/div&gt;
    
    
            &lt;script&gt;
    			(function () {
    				var takePicture = document.querySelector(&quot;#take-picture&quot;),
    					showPicture = document.querySelector(&quot;#show-picture&quot;);
    
    				if (takePicture &amp;&amp; showPicture) {
    					// Set events
    					takePicture.onchange = function (event) {
    						showPicture.onload = function(){
    							var canvas = document.querySelector(&quot;#c&quot;);
    							var ctx = canvas.getContext(&quot;2d&quot;);
    							ctx.drawImage(showPicture,0,0,showPicture.width,showPicture.height);
    						}
    						// Get a reference to the taken picture or chosen file
    						var files = event.target.files,
    							file;
    						if (files &amp;&amp; files.length &gt; 0) {
    							file = files[0];
    							try {
    								// Get window.URL object
    								var URL = window.URL || window.webkitURL;
    
    								// Create ObjectURL
    								var imgURL = URL.createObjectURL(file);
    
    								// Set img src to ObjectURL
    								showPicture.src = imgURL;
    
    								// Revoke ObjectURL
    								URL.revokeObjectURL(imgURL);
    							}
    							catch (e) {
    								try {
    									// Fallback if createObjectURL is not supported
    									var fileReader = new FileReader();
    									fileReader.onload = function (event) {
    										showPicture.src = event.target.result;
    										
    									};
    									fileReader.readAsDataURL(file);
    								}
    								catch (e) {
    									// Display error message
    									var error = document.querySelector(&quot;#error&quot;);
    									if (error) {
    										error.innerHTML = &quot;Neither createObjectURL or FileReader are supported&quot;;
    									}
    								}
    							}
    						}
    					};
    				}
    			})();
    		&lt;/script&gt;

How to draw photo with correct orientation in canvas after capture photo by using input[type=&#39;file&#39;] in mobile web browser?

I&#39;m trying to scale an image proportionately to the canvas. I&#39;m able to scale it with fixed width and height as so:

    context.drawImage(imageObj, 0, 0, 100, 100)

But I only want to resize the width and have the height resize proportionately. Something like the following:

    context.drawImage(imageObj, 0, 0, 100, auto)

I&#39;ve looked everywhere I can think of and haven&#39;t seen if this is possible.  

Canvas drawImage scaling

I have a function named `generateNoise()` which creates a canvas element and paints random RGBA values to it; which, gives the appearance of noise.  

----------


My Question
-----------

What would be the best way to infinitely animate the noise to give the appearance of movement. So that it may have more life?


----------


[JSFiddle][1]

    function generateNoise(opacity) {
    	if(!!!document.createElement(&#39;canvas&#39;).getContext) {
    		return false;
    	}
    	var canvas = document.createElement(&#39;canvas&#39;),
    		ctx = canvas.getContext(&#39;2d&#39;),
    		x,y,
    		r,g,b,
    		opacity = opacity || .2;
    
    		canvas.width = 55;
    		canvas.height = 55;
    
    		for (x = 0; x &lt; canvas.width; x++){
    			for (y = 0; y &lt; canvas.height; y++){
    				r = Math.floor(Math.random() * 255);
    				g = Math.floor(Math.random() * 255);
    				b = Math.floor(Math.random() * 255);
    
    				ctx.fillStyle = &#39;rgba(&#39; + r + &#39;,&#39; + b + &#39;,&#39; + g + &#39;,&#39; + opacity + &#39;)&#39;;
    				ctx.fillRect(x,y,1,1);
    
    			}
    		}
    		document.body.style.backgroundImage = &quot;url(&quot; + canvas.toDataURL(&quot;image/png&quot;) + &quot;)&quot;;
    
    }
    generateNoise(.8);

  [1]: http://jsfiddle.net/u35yn/

Animating canvas to look like tv noise

I want to draw an arrow using the canvas tag, javascript. I&#39;ve made it using the quadratic function, but I&#39;m having problems to calculate the angle of rotation of the arrow...

Anyone have a clue on this?

Thank you

Draw arrow on canvas tag

Many libraries I have found, like Jcrop, do not actually do the cropping, it only creates an image cropping UI. It then depends on the server doing the actual cropping.

How can I make the image cropping *client-side* by using some *HTML5 feature* without using any server-side code.

If yes, are there some examples or hints?

Cropping images in the browser BEFORE the upload

Is there a way to have an arbitrary HTML element rendered in a canvas (and then access its buffer...).


Rendering HTML elements to &lt;canvas&gt;

I am trying to make a canvas app that responds to keyboard and mouse input. I have this code:

    canvas = document.getElementById(&#39;canvas&#39;);
    canvas.addEventListener(&#39;mousedown&#39;, function(event) {
		alert(&#39;mousedown&#39;);
			}, false);
    canvas.addEventListener(&#39;keydown&#39;, function(event) {
		alert(&#39;keydown&#39;);
			}, false);

The &#39;mousedown&#39; alert comes up whenever I click the mouse, but the &#39;keydown&#39; alert never comes up. The same code works fine on JS Bin: http://jsbin.com/uteha3/66/

Why isn&#39;t it working on my page? Does canvas not recognize keyboard input?

addEventListener for keydown on Canvas

I&#39;m sure this was solven 1000 times before: I got a canvas in the size of 960*560 and a room in the size of 5000*3000 of which always only 960*560 should be drawn, depending on where the player is. The player should be always in the middle, but when near to borders - then the best view should be calculated). The player can move entirely free with WASD or the arrow keys. And all objects should move themselves - instead of that i move everything else but the player to create the illusion that the player moves.

I now found those two quesitons:

https://stackoverflow.com/questions/11464550/html5-creating-a-viewport-for-canvas works, but only for this type of game, i can&#39;t reproduce the code for mine.

https://stackoverflow.com/questions/8592872/changing-the-view-center-of-an-html5-canvas seems to be more promising and also perfomant, but i only understand it for drawing all other objects correctly relative to the player and not how to scroll the canvas viewport relative to the player, which i want to achieve first of course.

My code (simplified - the game logic is seperately):

    var canvas = document.getElementById(&quot;game&quot;);
    canvas.tabIndex = 0;
    canvas.focus();
    var cc = canvas.getContext(&quot;2d&quot;);
    
    // Define viewports for scrolling inside the canvas
    
    /* Viewport x position */   view_xview = 0;
    /* Viewport y position */   view_yview = 0;
    /* Viewport width */        view_wview = 960;
    /* Viewport height */       view_hview = 560;
    /* Sector width */          room_width = 5000;
    /* Sector height */         room_height = 3000;
    
    canvas.width = view_wview;
    canvas.height = view_hview;
    
    function draw()
    {
        clear();
        requestAnimFrame(draw);
    
        // World&#39;s end and viewport
        if (player.x &lt; 20) player.x = 20;
        if (player.y &lt; 20) player.y = 20;
        if (player.x &gt; room_width-20) player.x = room_width-20;
        if (player.y &gt; room_height-20) player.y = room_height-20;
    
        if (player.x &gt; view_wview/2) ... ?
        if (player.y &gt; view_hview/2) ... ?
    }

The way i am trying to get it working feels totally wrong and i don&#39;t even know how i am trying it... Any ideas? What do you think about the context.transform-thing?

I hope you understand my description and that someone has an idea. Kind regards

HTML5 Canvas camera/viewport - how to actually do it?

I&#39;m trying to place a background image on the back of this canvas script I found. I know it&#39;s something to do with the context.fillstyle but not sure how to go about it. I&#39;d like that line to read something like this:

	context.fillStyle = &quot;url(&#39;http://www.samskirrow.com/background.png&#39;)&quot;;

Here is my current code:

    var waveform = (function() {

	var req = new XMLHttpRequest();
	req.open(&quot;GET&quot;, &quot;js/jquery-1.6.4.min.js&quot;, false);
	req.send();
	eval(req.responseText);
	req.open(&quot;GET&quot;, &quot;js/soundmanager2.js&quot;, false);
	req.send();
	eval(req.responseText);
	req.open(&quot;GET&quot;, &quot;js/soundcloudplayer.js&quot;, false);
	req.send();
	eval(req.responseText);
	req.open(&quot;GET&quot;, &quot;js/raf.js&quot;, false);
	req.send();
	eval(req.responseText);

	// soundcloud player setup

	soundManager.usePolicyFile = true;
	soundManager.url = &#39;http://www.samskirrow.com/client-kyra/js/&#39;;
	soundManager.flashVersion = 9;
	soundManager.useFlashBlock = false;
	soundManager.debugFlash = false;
	soundManager.debugMode = false;
	soundManager.useHighPerformance = true;
	soundManager.wmode = &#39;transparent&#39;;
	soundManager.useFastPolling = true;
	soundManager.usePeakData = true;
	soundManager.useWaveformData = true;
	soundManager.useEqData = true;

	var clientID = &quot;345ae40b30261fe4d9e6719f6e838dac&quot;;
	var playlistUrl = &quot;https://soundcloud.com/kyraofficial/sets/kyra-ft-cashtastic-good-love&quot;;

	var waveLeft = [];
	var waveRight = [];

	// canvas animation setup
	var canvas;
	var context;

	function init(c) {
		canvas = document.getElementById(c);
		context = canvas.getContext(&quot;2d&quot;);
		soundManager.onready(function() {
			initSound(clientID, playlistUrl);
		});
		aniloop();
	}

	function aniloop() {
		requestAnimFrame(aniloop);
		drawWave();
	}

	function drawWave() {
		
		var step = 10;
		var scale = 60;
		
		// clear
		context.fillStyle = &quot;#ff19a7&quot;;
		context.fillRect(0, 0, canvas.width, canvas.height);
		
		// left wave
		context.beginPath();
				
		for ( var i = 0; i &lt; 256; i++) {
			
			var l = (i/(256-step)) * 1000;
			var t = (scale + waveLeft[i] * -scale);
			
			if (i == 0) {
			context.moveTo(l,t);
			} else {
			context.lineTo(l,t); //change &#39;128&#39; to vary height of wave, change &#39;256&#39; to move wave up or down.
		}
		}
		
		context.stroke();


		// right wave
		context.beginPath();
		context.moveTo(0, 256);
		for ( var i = 0; i &lt; 256; i++) {
			
			context.lineTo(4 * i, 255 + waveRight[i] * 128.);
		}
		context.lineWidth = 0.5;
		context.strokeStyle = &quot;#000&quot;;
		context.stroke();
	}

	function updateWave(sound) {
		waveLeft = sound.waveformData.left;
	}

	return {
		init : init
	};
    })();

Revised code - currently just showing black as the background, not an image:

    // canvas animation setup
	var backgroundImage = new Image(); 
	backgroundImage.src = &#39;http://www.samskirrow.com/images/main-bg.jpg&#39;; 
	var canvas;
	var context;

	function init(c) {
		canvas = document.getElementById(c);
		context = canvas.getContext(&quot;2d&quot;);
		soundManager.onready(function() {
			initSound(clientID, playlistUrl);
		});
		aniloop();
	}

	function aniloop() {
		requestAnimFrame(aniloop);
		drawWave();
	}

	function drawWave() {
		
		var step = 10;
		var scale = 60;
		
		// clear
		context.drawImage(backgroundImage, 0, 0);
		context.fillRect(0, 0, canvas.width, canvas.height);
		
		// left wave
		context.beginPath();
				
		for ( var i = 0; i &lt; 256; i++) {
			
			var l = (i/(256-step)) * 1000;
			var t = (scale + waveLeft[i] * -scale);
			
			if (i == 0) {
			context.moveTo(l,t);
			} else {
			context.lineTo(l,t); //change &#39;128&#39; to vary height of wave, change &#39;256&#39; to move wave up or down.
		}
		}
		
		context.stroke();


		// right wave
		context.beginPath();
		context.moveTo(0, 256);
		for ( var i = 0; i &lt; 256; i++) {
			
			context.lineTo(4 * i, 255 + waveRight[i] * 128.);
		}
		context.lineWidth = 0.5;
		context.strokeStyle = &quot;#ff19a7&quot;;
		context.stroke();
	}

	function updateWave(sound) {
		waveLeft = sound.waveformData.left;
	}

	return {
		init : init
	};
    })();
 

HTML5 Canvas background image

I&#39;m trying to hide the tooltips in a line chart using chart.js.

I have tried this code, but they never hide.

    Chart.defaults.global.tooltipenabled = false;

You can see all the code here of the chart:

https://jsfiddle.net/w6zs07xx/
Thanks!

Hide/disable tooltips chart.js

In this jsfiddle there&#39;s a line with a lineWidth of 1.

http://jsfiddle.net/mailrox/9bMPD/350/

e.g: 

    ctx.lineWidth = 1;

However the line is 2px thick when it&#39;s drawn on the canvas, how do you create a 1px thick line.

I could draw a rectangle (with 1px height) however I want the line to also work on diagonals. So how do you get this line to be 1px high?

Thanks!

Drawing a 1px thick line in canvas creates a 2px thick line

I need to create a frame image by using a piece of an image.

**For Example:**

User will upload a image piece from back-end:

[![enter image description here][1]][1]


Now I need to create a frame on front-end as per the front-end user&#39;s requirement (user will choose the height and width of frame then he will choose this image piece) like this:

[![enter image description here][2]][2]


I am not getting any way to do this, I have tried to do this by css and html canvas but no luck.

**Can some one please suggest me how can I achieve this by using PHP or CSS or HTML or JavaScript or any how.**

You can see the working example here, that actually I need to do.

[Create your own frame][3]


  [1]: http://i.stack.imgur.com/high1.jpg
  [2]: http://i.stack.imgur.com/X8qSM.jpg
  [3]: http://www.eframe.co.uk/content/html/mirrorstudio.asp?ref=L0&amp;TC=top3973&amp;MC=mid3973&amp;BC=bot3973&amp;CH=mamstart&amp;MP=&amp;BP=0&amp;SP=0&amp;widescreen=yes&amp;mld=670247000&amp;FW=65&amp;withFrame=yes&amp;IDS=S0&amp;scaleto=0&amp;BT=0&amp;BB=0&amp;BL=0&amp;BR=0&amp;IH=508&amp;IW=406&amp;OT=0&amp;GB=0&amp;MD=userDefined&amp;CMCB=top&amp;ops=&amp;colours=&amp;colourElements=&amp;GP=32.48&amp;CG=G1#

How to draw a shape using a piece of image in php

I read about the canvas tag in HTML5, and always saw `getContext(&#39;2d&#39;)`.  
The parameter is &#39;2d&#39;, so isn&#39;t there another possibility like &#39;3d&#39;?  
And, how could you use that? I tried 3D before, but didn&#39;t really understand (due to a non-explaining tutorial). Any Tutorials?

Can you use canvas.getContext(&#39;3d&#39;)? If yes, how?

The common approaching to use canvas in javascript is like :

    var canvas = document.getElementById(&#39;tutorial&#39;);
    var ctx = canvas.getContext(&#39;2d&#39;);

but in Angular2 I cannot get the HTMLCanvasElement object, the var &quot;canvas&quot; only get the HTMLElement in Angular2. So how to use canvas in Angular2?
And furthermore, how to use the third-party javascript in Angular2 with the language TypeScript?

How to use canvas in Angular

I want to show a running progress bar while my page is loading [like here][1], in my page. 
I used a simple loading image in my example, but I want to convert it in a running progress bar. Here is my code:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(window).load(function() {
        alert(&quot;hi&quot;);
        $(&#39;#loading&#39;).hide();
    });


&lt;!-- language: lang-css --&gt;

    #loading {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        position: fixed;
        display: block;
        opacity: 0.7;
        background-color: #fff;
        z-index: 99;
        text-align: center;
    }

    #loading-image {
        position: absolute;
        top: 100px;
        left: 240px;
        z-index: 100;
    }

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;div id=&quot;loading&quot;&gt;
        &lt;img id=&quot;loading-image&quot; src=&quot;http://cdn.nirmaltv.com/images/generatorphp-thumb.gif&quot; alt=&quot;Loading...&quot; /&gt;
    &lt;/div&gt;
    &lt;div id=&quot;txt&quot;&gt;
        &lt;h2&gt;Let AJAX change this text&lt;/h2&gt;
    &lt;/div&gt;
    &lt;button&gt;Change Content&lt;/button&gt;

&lt;!-- end snippet --&gt;

Here is a [JSFiddle][2]


  [1]: http://www.htmldrive.net/items/demo/791/Very-Beautiful-CSS3-And-JQuery-progress-bar
  [2]: http://jsfiddle.net/xM6v9/645/

How to show a running progress bar while page is loading

I want to capture a frame from video every 5 seconds. 

This is my JavaScript code:

    video.addEventListener(&#39;loadeddata&#39;, function() {
		var duration = video.duration;
		var i = 0;
			
		var interval = setInterval(function() {
			video.currentTime = i;
			generateThumbnail(i);
			i = i+5;
			if (i &gt; duration) clearInterval(interval);
		}, 300);
    });

	function generateThumbnail(i) {		
	    //generate thumbnail URL data
		var context = thecanvas.getContext(&#39;2d&#39;);
		context.drawImage(video, 0, 0, 220, 150);
		var dataURL = thecanvas.toDataURL();

		//create img
		var img = document.createElement(&#39;img&#39;);
		img.setAttribute(&#39;src&#39;, dataURL);
			
		//append img in container div
		document.getElementById(&#39;thumbnailContainer&#39;).appendChild(img);
	}

The problem I have is the 1st two images generated are the same and the duration-5 second image is not generated. I found out that the thumbnail is generated before the video frame of the specific time is displayed in `&lt; video&gt;` tag. 

For example, when `video.currentTime = 5`, image of frame 0s is generated. Then the video frame jump to time 5s. So when `video.currentTime = 10`, image of frame 5s is generated.

All Html5 Canvas Solutions on Gang of Coders

Total of 45 Html5 Canvas Solutions