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
188
votes
7 answers

HTML5 Canvas 100% Width Height of Viewport?

I am trying to create a canvas element that takes up 100% of the width and height of the viewport. You can see in my example here that is occurring, however it is adding scroll bars in both Chrome and FireFox. How can I prevent the extra scroll…
aherrick
  • 19,799
  • 33
  • 112
  • 188
182
votes
16 answers

Zoom in on a point (using scale and translate)

I want to be able to zoom in on the point under the mouse in an HTML 5 canvas, like zooming on Google Maps. How can I achieve that?
csiz
  • 4,742
  • 9
  • 33
  • 46
182
votes
26 answers

How can you find the height of text on an HTML canvas?

The spec has a context.measureText(text) function that will tell you how much width it would require to print that text, but I can't find a way to find out how tall it is. I know it's based on the font, but I don't know to convert a font string to a…
swampsjohn
  • 6,826
  • 7
  • 37
  • 42
179
votes
7 answers

Capture Signature using HTML5 and iPad

Anyone know how this can be done? Would you use a canvas object, svg, jQuery, etc?
Mark Richman
  • 28,948
  • 25
  • 99
  • 159
178
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…
Michael
  • 32,527
  • 49
  • 210
  • 370
172
votes
14 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
  • 25,618
  • 22
  • 70
  • 107
172
votes
8 answers

Drawing an SVG file on a HTML5 canvas

Is there a default way of drawing an SVG file onto a HTML5 canvas? Google Chrome supports loading the SVG as an image (and simply using drawImage), but the developer console does warn that resource interpreted as image but transferred with MIME type…
Randy Voet
  • 3,670
  • 4
  • 29
  • 36
171
votes
8 answers

How do I add a simple onClick event handler to a canvas element?

I'm an experienced Java programmer but am looking at some JavaScript/HTML5 stuff for the first time in about a decade. I'm completely stumped on what should be the simplest thing ever. As an example I just wanted to draw something and add an event…
Jer
  • 5,468
  • 8
  • 34
  • 41
171
votes
13 answers

Draw on HTML5 Canvas using a mouse

I want to draw on a HTML Canvas using a mouse (for example, draw a signature, draw a name, ...) How would I go about implementing this?
MartinJoo
  • 2,784
  • 9
  • 33
  • 39
168
votes
6 answers

Use HTML5 to resize an image before upload

I have found a few different posts and even questions on stackoverflow answering this question. I am basically implementing this same thing as this post. So here is my issue. When I upload the photo, I also need to submit the rest of the form. Here…
ferics2
  • 5,241
  • 7
  • 30
  • 46
167
votes
5 answers

jQuery equivalent of getting the context of a Canvas

I have the following working code: ctx = document.getElementById("canvas").getContext('2d'); Is there any way to re-write it to use $? Doing this fails: ctx = $("#canvas").getContext('2d');
Claudiu
  • 224,032
  • 165
  • 485
  • 680
163
votes
9 answers

How do I make a transparent canvas in html5?

How can I make a canvas transparent? I need to because I want to put two canvases on top of one another.
Urmelinho
  • 1,927
  • 2
  • 14
  • 22
163
votes
7 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: