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
126
votes
10 answers

Get a pixel from HTML Canvas?

Is it possible to query a HTML Canvas object to get the color at a specific location?
Liam
  • 19,819
  • 24
  • 83
  • 123
124
votes
20 answers

Drawing text to with @font-face does not work at the first time

When I draw a text in a canvas with a typeface that is loaded via @font-face, the text doesn't show correctly. It doesn't show at all (in Chrome 13 and Firefox 5), or the typeface is wrong (Opera 11). This type of unexpected behavior occurs only at…
lemonedo
  • 1,241
  • 2
  • 9
  • 3
124
votes
15 answers

Limit labels number on Chart.js line chart

I want to display all of the points on my chart from the data I get, but I don't want to display all the labels for them, because then the chart is not very readable. I was looking for it in the docs, but couldn't find any parameter that would limit…
mmmm
  • 3,768
  • 9
  • 36
  • 63
122
votes
12 answers

How to draw polygons on an HTML5 canvas?

I need to know how to draw polygons on a canvas. Without using jQuery or anything like that.
CyanPrime
  • 5,096
  • 12
  • 58
  • 79
122
votes
1 answer

Why is requestAnimationFrame better than setInterval or setTimeout

Why should I use requestAnimationFrame rather than setTimeout or setInterval? This self-answered question is a documentation example.
Blindman67
  • 51,134
  • 11
  • 73
  • 136
121
votes
7 answers

How do I get the width and height of a HTML5 canvas?

How can i get the width and height of the canvas element in JavaScript? Also, what is the "context" of the canvas I keep reading about?
clamp
  • 33,000
  • 75
  • 203
  • 299
119
votes
5 answers

Scaling an image to fit on canvas

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…
dradd
  • 1,247
  • 3
  • 10
  • 9
115
votes
5 answers

Fast and responsive interactive charts/graphs: SVG, Canvas, other?

I am trying to choose the right technology to use for updating a project that basically renders thousands of points in a zoomable, pannable graph. The current implementation, using Protovis, is underperformant. Check it out…
Andrew Mao
  • 35,740
  • 23
  • 143
  • 224
114
votes
16 answers

Can I turn off antialiasing on an HTML element?

I'm playing around with the element, drawing lines and such. I've noticed that my diagonal lines are antialiased. I'd prefer the jaggy look for what I'm doing - is there any way of turning this feature off?
Blorgbeard
  • 101,031
  • 48
  • 228
  • 272
113
votes
4 answers

Disable arrow key scrolling in users browser

I'm making a game using canvas, and javascript. When the page is longer than the screen (comments, etc.) pressing the down arrow scrolls the page down, and makes the game impossible to play. What can I do to prevent the window from scrolling when…
Kaninepete
  • 1,357
  • 2
  • 10
  • 12
111
votes
2 answers

Base64 PNG data to HTML5 canvas

I want to load a PNG image encoded in Base64 to canvas element. I have this code: