Stack Overflow
Stack Overflow

Questions tagged [html5-canvas]

Canvas is an HTML element that allows for dynamic, scriptable rendering of 2D shapes, 3D shapes, bitmap images and animations in both 2D and 3D.

The HTML <canvas> element can be used to draw graphics in JavaScript. The canvas element was added as part of the HTML5 specification.

The canvas can be used to draw graphics, make photo compositions, create animations, games and do real-time video processing or rendering.

It is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

Related tags: , , ,

References:

10937 questions
1114
votes
23 answers

How to clear the canvas for redrawing

After experimenting with composite operations and drawing images on the canvas I'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't think…
richard
  • 12,450
  • 7
  • 33
  • 38
501
votes
8 answers

HTML5 Canvas vs. SVG vs. div

What is the best approach for creating elements on the fly and being able to move them around? For example, let's say I want to create a rectangle, circle and polygon and then select those objects and move them around. I understand that HTML5…
verdy
  • 6,807
  • 6
  • 23
  • 27
430
votes
17 answers

Resize HTML5 canvas to fit window

How can I automatically scale the HTML5 element to fit the page? For example, I can get a
to scale by setting the height and width properties to 100%, but a won't scale, will it?
devyn
  • 13,761
  • 6
  • 22
  • 14
282
votes
8 answers

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

I'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…
nathan lachenmyer
  • 4,782
  • 8
  • 31
  • 49
242
votes
15 answers

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

I'm using Nihilogic's "Canvas2Image" 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'm currently…
Andrei Oniga
  • 7,288
  • 12
  • 47
  • 80
232
votes
11 answers

Tainted canvases may not be exported

I want to save my canvas to a img. I have this function: function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; …
user3465096
  • 2,295
  • 2
  • 10
  • 11
231
votes
4 answers

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

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 "writes" 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…
strugee
  • 2,573
  • 4
  • 16
  • 28
164
votes
12 answers

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

Digital camera photos are often saved as JPEG with an EXIF "orientation" 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…
flexponsive
  • 5,516
  • 6
  • 23
  • 36
159
votes
14 answers

HTML5 Canvas Resize (Downscale) Image High Quality?

I use html5 canvas elements to resize images im my browser. It turns out that the quality is very low. I found this: Disable Interpolation when Scaling a but it does not help to increase the quality. Below is my css and js code as well as…
confile
  • 29,115
  • 44
  • 187
  • 340
144
votes
13 answers

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

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 'getImageData' on 'CanvasRenderingContext2D': The…
Erfan Safarpoor
  • 4,451
  • 4
  • 19
  • 27
143
votes
13 answers

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

For a drawing application, I'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've googled but I have only…
Homan
  • 23,022
  • 21
  • 62
  • 96
135
votes
6 answers

Changing three.js background to transparent or other color

I'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: My CSS: