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
2 answers

HTML5 Canvas with rounded corner

I'd like to have an HTML5 canvas with rounded corner. I'm using the CSS property border-radius: 15px to round my corners. But, when I draw something in the corner of my canvas, I can draw in the corner. At the beginning: What I have: What I…
alexmngn
  • 9,107
  • 19
  • 70
  • 130
8
votes
1 answer

How to draw circles in HTML5 canvas with text in them

Seemed simple enough to draw circles and text in an HTML5 canvas, but I get non-intuitive behavior. The circles get drawn nice and pretty, then the more circles I draw, the older circles become more and more octagonal shaped. Very strange to me...…
user1779563
  • 770
  • 3
  • 7
  • 13
8
votes
1 answer

JavaFX GraphicsContext change text size

I would like to be able to change the font size and possibly the font itself before the strokeText() method is called. I can change the color but I don't see anyway to change the font. Pane canvas = new Pane(); GraphicsContext gc =…
user1958884
  • 303
  • 3
  • 8
  • 14
8
votes
2 answers

How can I simulate z-index in canvas

I have asked a question before: How can I control z-index of canvas objects? and we reached to a solution that may not be a good one for complicated situations. I found that canvas doesn't have a z-index system, but a simple ordered drawing one. Now…
JalalJaberi
  • 2,417
  • 8
  • 25
  • 41
8
votes
4 answers

Javascript tool for single-page applications guided tour

I saw once a javascript tool (jquery plugin maybe) to implement feature/guide tour functionality, unfortunately i haven't bookmarked the page. It used an overlay and focused on document elements, based on id attributes probably. Joyride or anything…
tsiokos
  • 1,090
  • 2
  • 10
  • 21
8
votes
5 answers

the relation of the bezier Curve and ellipse?

I want to draw a oval in html5 canvas,and i found a good method for it in stackoverflow.but I have another quesition. function drawEllipse(ctx, x, y, w, h) { var kappa = 0.5522848; ox = (w / 2) * kappa, // control point offset horizontal …
LIXer
  • 342
  • 1
  • 4
  • 10
8
votes
4 answers

Adding a new Point into the correct position in an Array of Points

I have a polygon with several points and a new point has to be added. The existing points are stored in an array: var points = [ {x: 0, y:0}, {x: 100, y: 0}, {x: 100, y: 100}, {x: 0, y: 100} ]; How do you determine which position of…
Nyxynyx
  • 61,411
  • 155
  • 482
  • 830
8
votes
1 answer

How to move canvas speedometer needle slowly?

I use following codes in order to move a picture in canvas for my speedometer. var meter = new Image, needle = new Image; window.onload = function () { var c = document.getElementsByTagName('canvas')[0]; var ctx = c.getContext('2d'); …
user1874941
  • 3,013
  • 4
  • 20
  • 31
8
votes
2 answers

Can i change about:config in mozilla via javascript?

Hello I am developing a HTML 5 game and in Chrome the animations looks great but in firefox not! I was searching over the internet and i found a solution that i need to change some settings in about:config and they…
liquid boy
  • 145
  • 1
  • 6
8
votes
2 answers

canvas arc too pixelated

I try to draw an circles in canvas, I ever do it before but i found it very pixelated this time var game; function game (){ this.canvas = document.getElementById('canvas'); this.ctx = this.canvas.getContext('2d'); this.initCanvas =…
Ajouve
  • 9,735
  • 26
  • 90
  • 137
8
votes
4 answers

Adding a background image in python

I'm trying to add a background image to a canvas in Python. So far the code looks like this: from Tkinter import * from PIL import ImageTk,Image ... other…
user1689935
  • 319
  • 2
  • 4
  • 6
8
votes
2 answers

html 5 canvas - get color of an image and then change the pixels with that color

I don't know if this is possible, I've never really used html canvas, but I am aware of var imgPixels = canvasContext.getImageData(0, 0, canvas.width, canvas.height); but how do I use this to get for example all the pixels with a certain color and…
Lennart
  • 1,560
  • 5
  • 20
  • 38
8
votes
1 answer

javascript collision detection between drawable circles

First of all please don't be too critical with my English. I'm not a native speaker. I hope I can explain myself never the less! Further more, I read that I should show I made some efforts to solve the given problem myself. To show this my post…
8
votes
3 answers

Animating the drawing of a canvas path on Android

I'd like to animate the drawing of a path, i.e. to have it progressively appear on the screen. I am using the canvas and my best guess so far is to use an ObjectAnimator to take care of the animation. However, I cannot figure out how to actually…
Gnurou
  • 7,923
  • 3
  • 22
  • 32
8
votes
2 answers

On rare occasion, doesn't redraw

I use to draw all notes and glyphs in my music education web apps: http://www.musictheory.net/exercises/keysig/bc98yy A Firefox 15.0.1 user has reported that sometimes the exercise goes on to the next question, but the canvas still shows…
iccir
  • 5,078
  • 2
  • 22
  • 34