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

What is the simplest way to add a hyperlink to a canvas element in ReportLab?

I am using ReportLab to make a pdf using Python. I want to add a shape to the canvas, and have that shape act as a hyperlink. What is the simplest way to make the rectangle in the following example link to google.com? from reportlab.pdfgen import…
japhyr
  • 1,710
  • 2
  • 18
  • 24
8
votes
1 answer

Change color using CSS?

Is there a way to change the color of the HTML5 element using CSS instead of JS? I need to customize qTips tooltip pointers using custom LESS CSS rules which I can't refer to using jQuery.
web_dvlp_sd
  • 167
  • 1
  • 2
  • 13
7
votes
1 answer

wpf canvas background image dynamically

In my application I want the user to load an image as the canvas background. How can I assign the image to canvas background?
Hasan Zubairi
  • 1,037
  • 4
  • 23
  • 57
7
votes
2 answers

Do browsers render canvas elements that are not inside the viewport?

I have a page that has pretty heavy (mid-weight rather) canvas operations going on. To cater for users on mobile devices and older computers I was thinking I could implement a mechanism that will check if the canvas element is actually visible and…
m90
  • 11,434
  • 13
  • 62
  • 112
7
votes
2 answers

Explain - Formula to curve through a control point

I have a question regarding formula curving through a control point. As you know, HTML Canvas has quadraticCurveTo(x1, y1, x2, y2) with x1 and x2 being the control point. However when you try to draw a stroke using it, the stroke will never touch…
Vennsoh
  • 4,853
  • 5
  • 26
  • 41
7
votes
1 answer

Animation SVG or Canvas?

I was wondering whether it's better to make an animation like this in canvas or svg (performance wise)? I'm rewriting it now in jquery but I read somewhere that a canvas is redrawn every time it changes.
BigChief
  • 1,413
  • 4
  • 24
  • 37
7
votes
1 answer

How to redraw canvas (every 250ms) without flickering between each redraw?

I wrote a function that draws out a slice of a pizza based on how big you specify it to be (in degrees) function drawProgress(degs){ var canvas = document.getElementById('progress'); var context = canvas.getContext('2d'); context.globalAlpha=1; …
user784637
  • 15,392
  • 32
  • 93
  • 156
7
votes
4 answers

how to create soft stroke edge using HTML5 canvas

I'm creating a drawing application using HTML5 canvas. https://github.com/homanchou/sketchyPad I can use rgba to control opacity in my line strokes, but how do I achieve a soft feathered brush edge vs a hard circular edge?
Homan
  • 25,618
  • 22
  • 70
  • 107
7
votes
1 answer

The difference between "100" and "100px" in html

i was about to create a html5 canvas the size of 500px*500px: and stroke a line from (70px, 70px) to (140px, 140px) on it: var canvas = document.getElementById( "stone" ); var context; try…
do.
  • 621
  • 1
  • 7
  • 18
7
votes
1 answer

How do I morph / animate a custom shape into a circle? CANVAS JS

I have a slice/segment of a circle and want to animate it morphing into a new complete circle with a 'biological' feel to it. By biological I mean a way other than increasing the arc-length of the segment. How can I get the kind of animation you…
Feeney
  • 357
  • 2
  • 4
  • 12
7
votes
3 answers

Canvas coordinates in Fabric.js have offset

I just started with fabric.js and I have a (probably beginner) error: I am using fabric with jquery with the following code: $(document).ready(function () { canvas = new fabric.StaticCanvas('scroller'); canvas.add( new fabric.Rect({ top: 0,…
McFarlane
  • 1,777
  • 2
  • 22
  • 39
7
votes
1 answer

RangeError with requestAnimationFrame

I'm getting the following error: RangeError: Maximum call stack size exceeded. on this row: requestAnimFrame(Game.loop()); in this piece code: var Game = { canvas: null, context: null, targetFps: 60, init: function() { canvas…
jdlm
  • 6,327
  • 5
  • 29
  • 49
7
votes
0 answers

WPF Virtualizing a Canvas

We have a series of rectangles produced inside a Canvas and they are nested in this order ScrollView>Canvas>VirtualizingStackPanel>Rectangles in the XAML. There seems to be little information on Microsoft about under what senarios Virtualization is…
LogicMW
7
votes
3 answers

context.getImageData() on localhost?

I have the following snippet of code and I'm trying to run it from localhost (OSX, running XAMPP): var canvas = document.getElementById('mycanvas'); var cx = canvas.getContext('2d'); var myImg = new Image(); myImg.src =…
Nikolay Dyankov
  • 6,491
  • 11
  • 58
  • 79
7
votes
1 answer

HTML5 Canvas (game) on iPad / Android tablets

While attempting to make a game using Canvas I noticed a few quirks on tablet / phone browsers. 1) How do I disable the Canvas from being selectable? It seems like when the user touches it, it highlights the canvas, and almost makes an attempt to…
Adam
  • 73
  • 3
1 2 3
99
100