Stack Overflow
Stack Overflow

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

implemanting freehand crop in android

i m trying to implement freehand crop in android using canvas. i use drawPath and store it in List and draw it in canvas path drawing ok, like this but now i want to make all pixel in that path in side area with this code but i dont no how to do…
Youddh
  • 1,511
  • 4
  • 34
  • 51
8
votes
2 answers

html5 canvas use image as mask

Is it possible to use a image with a shape as a mask for a whole canvas or images within the canvas? I want to place images in a canvas with a mask over the images, and then save it as a new image.
Jaap
  • 159
  • 1
  • 4
  • 9
8
votes
1 answer

filltext() canvas text position discrepencies between browsers

As can be seen in the screenshots at the bottom of the question or by going directly to the game. text is placed differently dependent on browser (firefox 15.0.1 renders differently then IE 9.9 and Chrome 21). call to draw…
Tyler
  • 81
  • 7
8
votes
2 answers

Mobile Safari renders scaled on Canvas?

I try to render a local image loaded with a FileReader object on a Canvas on Safari Mobile on iOS6. But every image with data-URL gets rendered vertically scaled. Is this a bug? On Chrome it's rendered correctly. Demo Script ScreenShot from iOS6…
André Fiedler
  • 1,093
  • 4
  • 16
  • 25
8
votes
4 answers

Scaling to a fixed point in KineticJS

I'm having some problems with scaling a container to a fixed point. In my case I'm trying to scale (zoom) a stage to the mouse cursor. Here is a way to do with pure canvas: http://phrogz.net/tmp/canvas_zoom_to_cursor.html (as discussed at Zoom…
Skarbo
  • 697
  • 1
  • 6
  • 12
8
votes
1 answer

Silverlight: Canvas overflows

I have created a Canvas, and within it I placed a StackPanel. The StackPanel is horizontal, and it accepts a list of thumbnailed images. The Canvas has a fixed size. When I put more thumbnails than the Canvas width can hold, the StackPanel is…
Palantir
  • 23,820
  • 10
  • 76
  • 86
8
votes
2 answers

HTML5 Canvas size and resolution

I wrote a simple example to show this. The size of canvas is 500px * 400px. The origin size of my image is 200px * 160px with dpi of 480. I want to display this image in the canvas with the origin size so that it will not be resized, which will blur…
Ovilia
  • 7,066
  • 12
  • 47
  • 70
8
votes
4 answers

Exporting a three.js mesh as an OBJ or STL

I would like to create an export as OBJ or STL link for a parametric Three.js mesh object. Just like the export option on http://www.3dtin.com Any advice would be appreciated.
user1507511
  • 81
  • 1
  • 2
8
votes
1 answer

scrolling/sliding background in html5 canvas

I am building a canvas game. In this i want to slide the background image in a loop. I don't know how to do this using javascript. I will be using single image which will slide continuously into the background. Thanks in advance.
rgolekar
  • 105
  • 1
  • 1
  • 6
8
votes
2 answers

catch-all keyup/keydown events in iframe?

I'm working on a canvas-based game and am using window.addEventListener() to attach keyup and keydown events globally. This works in when viewing the page normally, but when embedding it as an iframe; it doesn't get the keyup and keydown events. Is…
Stephen Belanger
  • 6,251
  • 11
  • 45
  • 49
8
votes
1 answer

three.js shadow cutoff

As the title says. When i render the current scene everything works fine. Only the shadow of the white monkey gets cut off. How can this happen, and is there a resolution for it? Here is the site: http://hammer.bz/test/ and a screen…
Bram Hammer
  • 363
  • 4
  • 21
8
votes
1 answer

Box2dweb - Collision Contact Point

I use box2dweb. I am trying to develop a game. At some point I need to find out the contact point between a "Circle" and "Box". All I know is it can be done using b2ContactListener. We can receive contact data by implementing b2ContactListener using…
Shekhar
  • 910
  • 1
  • 13
  • 23
8
votes
1 answer

Canvas Bug in Chrome

I seem to have stumbled across a bug in Chrome's implementation of canvas. If you create a canvas element with a large width (e.g. 17000), any paths drawn to that canvas after a certain distance down the canvas get drawn as only a pixel or two in…
Chmille4
  • 283
  • 2
  • 8
8
votes
2 answers

Making a Backbone.js view to draw objects on a canvas

I am making an application where different rectangles are painted on a canvas and I am trying to do it with Backbone. I have a model called box: Box = Backbone.Model.extend({ defaults: { x: 0, y: 0, w:…
rpabon
  • 1,191
  • 2
  • 16
  • 22
8
votes
2 answers

Better canvas motion blur

It's been asked before, but the accepted solution doesn't work for me (literally, nothing is blurring for me in the linked demo), and it's a bit of a kludge involving two canvas elements. I'm currently using the "poor man's" motion blur technique,…
Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141
1 2 3
…
99 100