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
1 answer

Photoshop JavaScript to resize image and canvas to specific (not square) sizes

How can I use PhotoShop's JavaScript functionality to convert a set of hundreds of images to a specific, non-square size (e.g. 320x350px)?
tibelchior
  • 573
  • 2
  • 6
  • 11
8
votes
4 answers

HTML5 Canvas: Moving/panning world with arrow keys in EaselJS

After a year of studying and experimenting through trial-and-error, I feel that I am starting to understand JavaScript a bit more. So, now, I wanna try my hand at writing a simple 2D platform game (think Super Mario World or Sonic the Hedgehog). For…
AKG
  • 2,936
  • 5
  • 27
  • 36
8
votes
4 answers

How to make Canvas take 100% of remaining space?

Similar to how i want a div to take 100% height, 100% width, or both. i want a Canvas to take 100% width and 100% height: (Link to JsFiddle for your perusal) Markup:
CSS: html { …
Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219
8
votes
1 answer

Canvas pre rendering?

Is there any point in pre-rendering images on canvas? An example, var img; // Img object var pre = document.createElement("canvas"); pre.width = img.width; pre.height = img.height; var precon = pre.getContext("2d"); precon.drawImage(img, 0,…
user2251919
  • 665
  • 2
  • 11
  • 23
8
votes
2 answers

JS game - shooting in random directions

I am working on a HTML5 canvas / Javascript based game. It is a fighter jet game, after I pass specific score my main boss will spawn. Everything works like I wanted to but, I dont how to do boss shooting. My jet fires a single bullet verticaly but…
Toesmash
  • 307
  • 4
  • 20
8
votes
1 answer

How Do I Position Custom Dialog at specific Coordinate?

I'm a noob to android development and I am trying to figure out how to display the NewQuickAction3D popup dialog at a specific coordinate in a view. I am integrating the popup with this tutorial. Essentially, I want to use the popup dialog to…
B. Money
  • 931
  • 2
  • 19
  • 56
8
votes
1 answer

Never-ending floor in THREE.JS scene

What would be the best way to create a continuous-in-every-direction floor in my canvas three.js scene? Would it be better to attach a THREE.PlaneGeometry to the camera position, so that it travels with the camera. Or is there another way of…
rob-gordon
  • 1,419
  • 3
  • 20
  • 38
8
votes
2 answers

HTML String in Html2Canvas

How do we pass a valid HTML String into html2canvas? e.g var html = "

HI

The way it is done on http://html2canvas.hertzen.com/screenshots.html Html2canvas is really great and all but it's very poorly…
Manak Kapoor
  • 962
  • 3
  • 12
  • 21
8
votes
4 answers

how to draw text box inside the canvas

i need text box inside the canvas. is it possible to draw textbox inside the canvas?? like: i dont want answer like this:
Arunkumar
  • 184
  • 1
  • 1
  • 10
8
votes
1 answer

Draw a (progressive) paint splash on a canvas

I'm looking for a simple method which can able me to draw in a canvas a paint splash like this on : One method will be to fire a lot of small particles which will paint a little circle, but I don't want to manage a lot of particle objects. EDIT :…
Razouille
  • 221
  • 1
  • 2
  • 6
8
votes
2 answers

saving canvas locally in IE

Hi I want to save a canvas locally in IE. var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); I couldn't manage to download it with following ways. 1) document.execCommand("SaveAs".. 2) window.location.href =…
user1874941
  • 3,013
  • 4
  • 20
  • 31
8
votes
1 answer

Get color value of specific position in colorbar with gradient

I generated a gradient colobar with CSS3 styles (fiddle) and now want the color value of a specific location (by x and y coords) in that colorbar. As far as I know there is no direct way to do that. I see two options: Implement the gradient…
medihack
  • 16,045
  • 21
  • 90
  • 134
8
votes
3 answers

HTML5 Canvas transformation issue using 2D rendering context

I'm trying to make a sort of a camera in HTML5 Canvas using 2D rendering context. As you see in the picture I've drawn below, here's what I'm trying to achieve: Say that the black one is the eye of the camera, I want it to be able to move around …
user905864
8
votes
1 answer

Android loading of large bitmaps

I'm making an Android app and I need to load an image (bitmap) in a cavas and resize it using the "pinch zoom" gesture. When the image is over a certain size, however, the application crashes (OutOfMemory exception). How do I optimize the loading…
Giammy
  • 83
  • 1
  • 7
8
votes
2 answers

Add image from user computer to canvas

i'm working on a web app that allow users to create dynamic slideshow. Currently i've got an issue regardless how to add image from the computer's user to the canvas. I'm using a input button to get the file from the computer and it appeal a…
SnoWhite
  • 109
  • 1
  • 2
  • 8