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

How to Draw an image on canvas from a byte array in jpeg or png format

Like the title says, I have a byte array representing the contents of an image (can be jpeg or png). I want to draw that on a regular canvas object How can I do that? UPDATE I tried this (unsuccesfully): (imgData…
Ben
  • 10,020
  • 21
  • 94
  • 157
8
votes
3 answers

Canvas.toDataURL() returns a file without extension

I'm converting an HTML canvas into a jpg when a save button is clicked. I use the code below: $('#save').click(function(e){ var canvas = $('#myCanvas')[0]; var image = canvas.toDataURL("image/png").replace("image/png","image/octet-stream"); …
Emmanuel Gabion
  • 425
  • 1
  • 9
  • 20
8
votes
3 answers

How to draw on an HTML5 Canvas, pixel-by-pixel

Suppose that I have a 900x900 HTML5 Canvas element. I have a function called computeRow that accepts, as a parameter, the number of a row on the grid and returns an array of 900 numbers. Each number represents a number between 0 and 200. There is…
Vivian River
  • 31,198
  • 62
  • 198
  • 313
8
votes
5 answers

THREE.js: Cross-origin image load denied by Cross-Origin Resource Sharing policy

My Chrome version is 31.0.1650.57 I'm learning THREE.js and downloaded a planet sample from https://github.com/jeromeetienne/threex.planets/ But when I run the earth.html a strange error happens as the title says: THREE.WebGLRenderer 59…
Wang Liang
  • 941
  • 2
  • 15
  • 34
8
votes
0 answers

Can we hardware accelerate an off-screen canvas?

I'm creating an off-screen bitmap+canvas, drawing a bunch of smaller bitmaps into it, then drawing it into a view. The isHardwareAccelerated() method returns false for my canvas: mBitmap = new Bitmap(500, 500, Bitmap.Config.RGB_565); mCanvas = new…
user291701
  • 38,411
  • 72
  • 187
  • 285
8
votes
4 answers

Chart.js set Doughnut background-color?

I'm using Chart.js (documentation), but I can't seem to set a background color to the Donut path. It isn't even mentioned in the docs. What I'm trying to achieve: Current code: var meterInvoicesData = [ { value: 75, color:…
jlmmns
  • 837
  • 4
  • 14
  • 25
8
votes
2 answers

Setting multiple custom elements to MultiAutoCompleteTextView : Android

Continuing from my previous post, I was able to set multiple elements to the MultiAutoCompleteTextView but I was not able to wrap those items with custom background and close button as in that link picture. I was able to do the same with single…
Braj
  • 2,164
  • 2
  • 26
  • 44
8
votes
2 answers

Multiplatform HTML5 games DOM+CSS vs CANVAS vs both

I've built a few HTML5 games within the past few months and have been using the createJS suite and rendering everything to canvas. The reasons behind my choice of canvas is that it seemed easier to get it working cross platform as I could just scale…
rorypicko
  • 4,194
  • 3
  • 26
  • 43
8
votes
1 answer

What is necessary to make QtQuick 2's Canvas element HiDPI-(retina-)aware?

I have the following qml application: import QtQuick 2.1 import QtQuick.Controls 1.0 import QtQuick.Layouts 1.0 import QtQuick.Window 2.0 ApplicationWindow { id: window width: 480 height: 240 RowLayout { Rectangle { …
Tobias
  • 6,388
  • 4
  • 39
  • 64
8
votes
5 answers

HTML5 Canvas: Manipulating Individual Paths

How can I save a specific path to a javascript variable/array, and later manipulate it, when using an HTML5 canvas? Here's what I'm doing thus far: ctx.beginPath(); ctx.moveTo(lastX,lastY); …
J S
  • 3,324
  • 4
  • 20
  • 27
8
votes
2 answers

How to avoid seams between filled areas in canvas?

When I fill adjacent areas in HTML5 Canvas or similar systems like Quartz or GDI+, I see a light colored seam on the shared edge. Here's an example, (code below): I think I understand what's going on but don't have a fix. Each edge is anti-aliased…
xan
  • 7,511
  • 2
  • 32
  • 45
8
votes
3 answers

Canvas drawImage() not working

This Javascript code draw part of the image on the canvas: var img = document.getElementById('img'); var canvas = document.getElementById('can'); //canvas.width = img.width; //canvas.height = img.height; var ctx =…
Joe
  • 377
  • 3
  • 5
  • 13
8
votes
2 answers

Put text on an image and save as image

I have one problem with HTML5 Canvas. I have one image. On this image I want to put text and display/save this as an image. I have this code: window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context =…
milan
  • 81
  • 1
  • 1
  • 3
8
votes
3 answers

jQuery plugin for designing report layouts

I'm looking for some sort of jquery plugin (or even plain javascript) that can be used to create report layouts, business card layouts, etc. Not finding anything after lots of googling. Basically, I'm envisioning a canvas (possibly html5 canvas?)…
Tauren
  • 26,795
  • 42
  • 131
  • 167
8
votes
2 answers

Equivalent of canvas in Windows forms

I am creating a simple app to display multiple images one below the other. In WPF, I used Number of canvas equivalent to number of images and added those canvas to the main canvas. And using Image control in each canvas, i uploaded the images with…
Uthistran Selvaraj.
  • 558
  • 2
  • 11
  • 29