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
160
votes
8 answers

How can I write text on a HTML5 canvas element?

Is it possible to write text on HTML5 canvas?
Budda
  • 18,015
  • 33
  • 124
  • 206
155
votes
5 answers

Map Tiling Algorithm

The Map I'm making a tile based RPG with Javascript, using perlin noise heightmaps, then assigning a tile type based on the height of the noise. The maps end up looking something like this (in the minimap view). I have a fairly simple algorithm…
Dan Prince
  • 29,491
  • 13
  • 89
  • 120
154
votes
6 answers

How to fill the whole canvas with specific color?

How to fill the whole HTML5 with one color. I saw some solutions such as this to change the background color using CSS but this is not a good solution since the canvas remains transparent, the only thing that changes is the color of the…
Idrizi.A
  • 9,819
  • 11
  • 47
  • 88
150
votes
5 answers

How to add image to canvas

I'm experimenting a bit with the new canvas element in HTML. I simply want to add an image to the canvas but it doesn't work for some reason. I have the following code: HTML CSS canvas#viewport { border: 1px solid…
PeeHaa
  • 71,436
  • 58
  • 190
  • 262
149
votes
6 answers

Disable Interpolation when Scaling a

NOTE: This has to do with how existing canvas elements are rendered when scaled up, not to do with how lines or graphics are rendered onto a canvas surface. In other words, this has everything to do with interpolation of scaled elements, and nothing…
namuol
  • 9,816
  • 6
  • 41
  • 54
143
votes
7 answers

Drawing an image from a data URL to a canvas

How can i open an image in a Canvas ? which is encoded I am using the var strDataURI = oCanvas.toDataURL(); The output is the encoded base 64 image. How can i draw this image on a canvas? I want to use the strDataURI and create the Image ? Is…
Yahoo
  • 4,093
  • 17
  • 59
  • 85
142
votes
8 answers

Best way to detect that HTML5 is not supported

The standard way to deal with situations where the browser does not support the HTML5 tag is to embed some fallback content like: Your browser doesn't support "canvas". But the rest of the page remains the same, which may…
142
votes
11 answers

Resize image with javascript canvas (smoothly)

I'm trying to resize some images with canvas but I'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't know if these are built into canvas or not. Here's my…
steve
  • 3,878
  • 7
  • 34
  • 49
139
votes
7 answers

Get distance between two points in canvas

I have canvas drawing tab and want lineWidth to be based on distance between two last mousemove coordinate updates. I will make translation of distance to width myself, I just need to know how to get distance between those points (I already have…
Anagmate
  • 1,825
  • 3
  • 16
  • 15
138
votes
20 answers

HTML5 canvas ctx.fillText won't do line breaks?

I can't seem to be able to add text to a canvas if the text includes "\n". I mean, the line breaks do not show/work. ctxPaint.fillText("s ome \n \\n
thing", x, y); The above code will draw "s ome \n
thing", on one line. Is this a…
Spectraljump
  • 4,189
  • 10
  • 40
  • 55
136
votes
6 answers

Drawing a dot on HTML5 canvas

Drawing a line on the HTML5 canvas is quite straightforward using the context.moveTo() and context.lineTo() functions. I'm not quite sure if it's possible to draw a dot i.e. color a single pixel. The lineTo function wont draw a single pixel line…
infiniteloop
  • 2,112
  • 2
  • 18
  • 21
136
votes
10 answers

How to center canvas in html5

I've been searching for a solution for a while now, but haven't found anything. Maybe it's just my search terms. Well, I'm trying to make the canvas center according to the size of the browser window. The canvas is 800x600. And if the window gets…
jorgen
  • 1,389
  • 2
  • 9
  • 3
136
votes
10 answers

Package cairo was not found in the pkg-config search path. Node j.s install canvas issue

I am having a problem installing installing the canvas module in node..It seems to be something with cairo I am getting this error... npm http GET https://registry.npmjs.org/canvas npm http 304 https://registry.npmjs.org/canvas npm http GET…
plimbs
  • 1,459
  • 2
  • 10
  • 12
134
votes
14 answers

Maximum size of a element

I'm working with a canvas element with a height of 600 to 1000 pixels and a width of several tens or hundreds of thousands of pixels. However, after a certain number of pixels (obviously unknown), the canvas no longer display shapes I draw with JS. …
seriousdev
  • 7,519
  • 8
  • 45
  • 52
132
votes
23 answers

Destroy chart.js bar graph to redraw other graph in same

I am using the Chart.js library to draw a bar graph, it is working fine, but now I want to destroy the bar graph and make a line graph in the same canvas. I have tried these two ways to clear the canvas: var grapharea =…
Syed Uzair Uddin
  • 3,296
  • 7
  • 31
  • 47