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

Has anyone got processing.js working in IE?

I'm looking for examples of processing.js working in Internet Explorer via ExplorerCanvas or similar.
meleyal
  • 32,252
  • 24
  • 73
  • 79
7
votes
1 answer

cleanest Drag and Drop code in Javascript Canvas

I'm looking for the fastest and lightest way to drag and drop shapes and sprites on a JS Canvas for game-development purposes. I've started by doing distance checks using the current mouse position and the origins of circles. It works, but when…
Verne
  • 71
  • 1
  • 1
  • 2
7
votes
2 answers

HTML5 Canvas filltext and font-face

Been looking around stackoverflow and google for ways to solve this issue im having but havent had much luck with a solution. What is happening is my font-face font is not loading at the right time. What I have going on is I have a html5 canvas and…
Anks
  • 485
  • 9
  • 27
7
votes
2 answers

Does Canvas redraw itself every time anything changes?

I have done some research on how canvas works. It is supposed to be "immediate mode" means that it does not remember what its drawing looks like, only the bitmap remains everytime anything changes. This seems to suggest that canvas does not redraw…
Codier
  • 2,126
  • 3
  • 22
  • 33
7
votes
1 answer

SVG in the Android Browser

I know it's not supported natively, but are there any JS Shims that render into a canvas object or something that would allow me to render SVG on the native android browser? (Not Opera, etc since I'd like to avoid having the user need to install…
9point6
  • 976
  • 2
  • 10
  • 23
7
votes
4 answers

Website Screenshot (HTML5 Canvas / Services)

Alright all, Been doing a bit of research and want to know if anyone else has tried this... and what approach would you take. I'm planning on doing a website which will display a screenshot of a website (maybe based on the url in someones email…
Von Schmytt
  • 463
  • 2
  • 6
  • 15
7
votes
1 answer

How to set 2 fonts for HTML5 canvas context?

I'm trying to get the Canvas to use two fonts when drawing text. This is because my main font is Comic Sans MS (It's a kids app). Since I can't find Comic Sans on iPad, I'm trying to substitute it with MarkerFelt-Thin. I've tried to use several…
infiniteloop
  • 2,112
  • 2
  • 18
  • 21
7
votes
1 answer

Understanding iPhone resolution

I'm using phonegap to export a very simple html5 page to an iphone app and running into this silly issue. iPhone resolution is 960x640. When I set the canvas to those dimensions, it seems way too big.
Skylervich
  • 150
  • 1
  • 8
7
votes
3 answers

Javascript canvas collision detection

I'm building a game in Javascript using canvas which requires collision detection, in this case if the player sprite hits a box, the player must not be allowed through the box. I have a global array called blockList that holds all the boxes being…
James Dawson
  • 5,309
  • 20
  • 72
  • 126
7
votes
1 answer

How to upload an image (given in form of data-URL from HTML canvas) to facebook?

In my web page, I have an HTML canvas. I want to upload the canvas image to facebook. I think the first step may be a canvasContext.toDataURL() function call. What's next? If the user is logged in to facebook, I want him/her to be able to upload the…
7
votes
3 answers

Algorithm to determine the points delimiting the boundaries of a shape -- using javascript

I'm working on a html map maker, and i'd like to offer our users the ability to create shapes quickly by clicking in a zone instead of having them define the shape manually. First let's have a look at what we're doing for the moment. The user would…
samy
  • 14,832
  • 2
  • 54
  • 82
7
votes
1 answer

Resize image proportionately to fit into HTML5 canvas

I am trying to write a jQuery plugin that will have similar functionality to the Flash based product editor on Zazzle.com. What I need to know is how, using the context.drawImage() canvas function, I can insert an image and resize it to fit in the…
watzon
  • 2,401
  • 2
  • 33
  • 65
7
votes
2 answers

measuring text on scaled canvas

I've been struggling with text measuring and scaled canvases. When the canvas is unscaled, getTextBounds and measureText deliver accurate results. However, when the canvas is scaled both methods do not deliver results that match the actual size of…
P.Melch
  • 8,066
  • 43
  • 40
7
votes
2 answers

debug facebook canvas app after ssl restriction

I have a canvas iframe Facebook app. I updated the secure canvas URL with https url and it works fine. since October 1st, it is not allowed to access apps without ssl. I used to debug my app by creating a duplicate app with localhost as the canvas…
as-lev
  • 71
  • 1
  • 2
7
votes
3 answers

How to undraw, hide, remove, or delete an image from an html canvas?

this.context.drawImage(myimage, 0, 0); Putting the image on the canvas is pretty well covered all over the web. But how do I remove it after it's there?
John Mee
  • 50,179
  • 34
  • 152
  • 186
1 2 3
99
100