Questions tagged [canvas]

Canvas is a generic term for the drawing surface used with many free-form graphics output APIs. Use this tag with other tags that indicate the specific graphics API that is being used along with the programming language and the target environment: [android], [uwp], [wpf], [tkinter], [java], [html5], [chart.js] etc. Also include a specific canvas tag such as [android-canvas], [html5-canvas], [tkinter-canvas] if appropriate.

As computer hardware has increased in capabilities and power, the number of graphical interface APIs, how they are used, and the devices they can be used with has also increased. Posted questions should provide some details as to the target environment and hardware being used.

Most of these use the term "canvas" to describe the drawing surface on which the graphic API "draws" when the programmer calls the various primitives to create lines and colors and shapes. Typically graphic APIs use a canvas not only for images but also as a surface on which various user controls such as buttons are placed and a canvas may be placed in a container such as a as well.

Some graphical APIs have more than one way to draw on a canvas. For example UWP applications may use the UWP programmatic, function call interface or they may use the approach.

For questions concerning a specific browser implementation of and , you should provide the appropriate browser tag.

Android Canvas

Canvas An API for drawing into a Bitmap

Related tags: ,

WPF Canvas

The Canvas defines an area within which you can explicitly position child elements by using coordinates that are relative to the Canvas area.

Related tags: ,

Further reading: MSDN Reference

Universal Windows Program (UWP) Canvas class

See Canvas class for documentation on the UWP Canvas class of Windows.UI.Xaml.Controls.

Also see video Windows 10 Development for absolute beginners: Canvas and Shapes.

Since UWP applications may target a number of different devices and hardware platforms (x86, ARM) as well as a number of different programming languages may be used with them (, ) language specific tags as well as details about the target environment should be in the posted question.

Related tags:

Tkinter canvas

Canvas is a general purpose widget of the Tkinter module, a standard Python interface to the Tk GUI Toolkit. It provides structured facilities and is commonly used to display and edit drawings.

Related tags: ,

HTML canvas

<canvas> is an HTML element introduced with HTML5. It provides a way to draw pixel data on screen through the use of JavaScript APIs.

<canvas id="example" width="200" height="200">
    This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

Further reading: Mozilla: Canvas tutorial, WHATWG living standard

Related tags , ,

35912 questions
1270
votes
25 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
  • 14,050
  • 8
  • 37
  • 39
1045
votes
7 answers

Using HTML5/Canvas/JavaScript to take in-browser screenshots

Google's "Report a Bug" or "Feedback Tool" lets you select an area of your browser window to create a screenshot that is submitted with your feedback about a bug. Screenshot by Jason Small, posted in a duplicate question. How are they doing this? …
joelvh
  • 16,700
  • 4
  • 28
  • 20
814
votes
16 answers

Capture HTML canvas as GIF/JPG/PNG/PDF?

Is it possible to capture or print what's displayed in an HTML canvas as an image or PDF? I'd like to generate an image via canvas and be able to generate a PNG from that image.
Parand
  • 102,950
  • 48
  • 151
  • 186
338
votes
19 answers

Resizing an image in an HTML5 canvas

I'm trying to create a thumbnail image on the client side using javascript and a canvas element, but when I shrink the image down, it looks terrible. It looks as if it was downsized in photoshop with the resampling set to 'Nearest Neighbor' instead…
Telanor
  • 4,419
  • 6
  • 29
  • 36
327
votes
22 answers

How do I get the coordinates of a mouse click on a canvas element?

What's the simplest way to add a click event handler to a canvas element that will return the x and y coordinates of the click (relative to the canvas element)? No legacy browser compatibility required, Safari, Opera and Firefox will do.
Tom
  • 42,844
  • 35
  • 95
  • 101
241
votes
3 answers

Canvas width and height in HTML5

Is it possible to fix the width and height of an HTML5 canvas element? The usual way is the following :
Dustin
  • 2,465
  • 3
  • 16
  • 5
235
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,752
  • 4
  • 19
  • 30
228
votes
14 answers

What's the best way to set a single pixel in an HTML5 canvas?

The HTML5 Canvas has no method for explicitly setting a single pixel. It might be possible to set a pixel using a very short line, but then antialiasing and line caps might interfere. Another way might be to create a small ImageData object and…
Alnitak
  • 334,560
  • 70
  • 407
  • 495
228
votes
12 answers

How to change the opacity (alpha, transparency) of an element in a canvas element?

Using the HTML5 element, I would like to load an image file (PNG, JPEG, etc.), draw it to the canvas completely transparently, and then fade it in. I have figured out how to load the image and draw it to the canvas, but I don't know how to…
Joe Lencioni
  • 10,231
  • 18
  • 55
  • 66
218
votes
10 answers

Canvas is stretched when using CSS but normal with `width` & `height` attributes

I have 2 canvases, one uses HTML attributes width and height to size it, the other uses CSS:
Sirber
  • 3,358
  • 5
  • 25
  • 32
215
votes
15 answers

Controlling fps with requestAnimationFrame?

It seems like requestAnimationFrame is the de facto way to animate things now. It worked pretty well for me for the most part, but right now I'm trying to do some canvas animations and I was wondering: Is there any way to make sure it runs at a…
211
votes
9 answers

html5 - canvas element - Multiple layers

Without any extension library, is it possible to have multiple layers in the same canvas element? So if I do a clearRect on the top layer, it will not erase the bottom one? Thanks.
Gregoire
  • 24,219
  • 6
  • 46
  • 73
204
votes
14 answers

How To Save Canvas As An Image With canvas.toDataURL()?

I'm currently building a HTML5 web app/Phonegap native app and I can't seem to figure out how to save my canvas as an image with canvas.toDataURL(). Can somebody help me out? Here's the code, what's wrong with it? //My canvas was named…
Wardenclyffe
  • 2,401
  • 3
  • 19
  • 17
203
votes
2 answers

Why are my balls disappearing?

Pardon the funny title. I've created a little graphic demo of 200 balls bouncing and colliding, both against the walls and each other. You can see what I have currently here: http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/ The…
Yang Pulse
  • 2,019
  • 1
  • 12
  • 13
199
votes
15 answers

How to draw a rounded rectangle using HTML Canvas?

HTML Canvas provides methods for drawing rectangles, fillRect() and strokeRect(), but I can't find a method for making rectangles with rounded corners. How can I do that?
DNB5brims
  • 29,344
  • 50
  • 131
  • 195
1
2 3
99 100