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.

canvas
Filter by
Sorted by
Tagged with
1 vote
0 answers
402 views

How to set proportional Canvas.Left?

Is there the way to set the distance between the left side of a control and the left side of its parent Canvas proportionally, not as a fixed value? I use Canvas (actually DragCanvas, because I allow ...
tauri's user avatar
  • 303
1 vote
0 answers
106 views

Canvas image not grabbed in QQuickWindow

I need to capture an image from QML which has Canvas elements. Whereas Canvases are displayed fine they are not correctly saved in the picture snapshots. I have used QQuickWindow grabWindow method ...
neoterryjoe's user avatar
1 vote
1 answer
953 views

How can I recognize a hand drawn shape is similar to a SVG Model

I would like to let users re-draw over a svg shape (the number 8), and be able to detect if the shape is well completed or not. The user will have to re-draw over the borders of this svg, with his ...
Louis Serre's user avatar
1 vote
1 answer
5k views

Add a textbox to a wpf canvas in a position chosen by the user (C#)

I would like to add a functionality to a WPF C# app that allows the user to do the following: When you press a button, a textbox is created in the corner of a canvas, when you're done typing and you ...
Loukoum Mira's user avatar
1 vote
0 answers
277 views

Canvas-engine and Fancybox

So the problem is easy. I want canvas-engine in the fancybox. So when I click on some fancybox item it loads some file in it. I that file I have added canvas-engine and script file where I write my ...
Jānis Veiss's user avatar
1 vote
0 answers
131 views

Canvas images as buttons

I have spent hours trying to find an answer to this, but can't find anything that exactly describes what I'm trying to do. I have 6 images that are shaped like jigsaw puzzle pieces, and I place them ...
cpeddie's user avatar
  • 789
1 vote
0 answers
4k views

How to allow file-access-from-files?

I have been working through the HTML5 canvas tutorial(s). Currently on Pixel manipulation: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas, and hit ...
ugajin's user avatar
  • 11
1 vote
1 answer
384 views

Drawing a SVG file on a HTML5 canvas at a specific time

I found the topic Drawing an SVG file on a HTML5 canvas about rendering SVG. Is there a way to draw SVG animated file at specific moment of time? I mean, how to change the code var img = new Image(); ...
Maksim Surov's user avatar
1 vote
1 answer
921 views

HTML5 'touchmove' event does not fire on canvas if started outside of it

When I try to swipe over a canvas starting outside of it, event listener attached to one does not receive 'touchmove' event. In other words, I need to register touchmove that bagan on parent node. Is ...
Serga's user avatar
  • 253
1 vote
1 answer
888 views

Performance difference between 'source-over' and 'destination-over' globalCompositeOperation for HTML canvas

Having reviewed the various globalCompositeOperation options for drawing on a 2D canvas, it occurs to me that destination-over is essentially the same as the default source-over but with the elements ...
Jared's user avatar
  • 758
1 vote
0 answers
464 views

HTML5 canvas (videothumbnail) gives SecurityError

I have read lost of threads on this but wasnt able to find solution. This is the situation. I've loaded a video and created a thumbnail with HTML5 canvas. But when I try to save that canvas image with ...
APS_dev's user avatar
  • 25
1 vote
2 answers
6k views

Drawing Object Arrays with JS Canvas

I'm new to JS, and I have not gone into jQuery or such yet. All that I'm trying to do is draw 4 simple circles on the canvas. I put the objects into an array because I planned to possibly expand in ...
Austin Reid's user avatar
1 vote
0 answers
71 views

canvas rotate makes translate go in different direction

I have an image in a canvas which users can rotate and move, using the rotate() and translate() methods. The moving works fine, until the image is rotated. Once rotated, translate moves the canvas ...
rpsep2's user avatar
  • 3,101
1 vote
1 answer
152 views

How to initialize image before uploading it to canvas?

I'm using fabricjs and I want to initialize an image before uploading it to canvas to manipulate it from outside of function. I made a fiddle: http://jsfiddle.net/o81974e8/ This is my script: var $...
Revels's user avatar
  • 223
1 vote
1 answer
2k views

UI Scroll does not work on touch Unity

I am using unity 4.6 and I made a UI scroll panel before yesterday night it is working fine but today it is not working on touch. I don,t know what is happen. I just add a different camera for canvas. ...
Sourav Mishra's user avatar
1 vote
0 answers
96 views

Add Text & image on single html5 canvas alongwith dragging & rotation options

I have seen few websites(like vistaprint.com) which allows users to create business cards. The designs are customized by users. Most of the sites use HTML5 canvas and displays text and images on it. ...
Harry's user avatar
  • 11
1 vote
0 answers
504 views

Removing colour after drawing from Fabric JS leaves jagged edges

I need to remove a specific colour after drawing is done on a Fabric JS canvas and then export result as a png to an API. So, I am pasting the data onto another normal HTML5 canvas and using the ...
Nikhil Khullar's user avatar
1 vote
0 answers
348 views

How to draw overlapping circles with radial gradient on the edge in a rectangular?

I wish to draw transparent circles within a black rectangular and the circles overlap partially. I successfully did it by using PorterDuffXfermode(Mode.SRC_OUT) to crop off two transparent circles ...
user3881602's user avatar
1 vote
1 answer
2k views

p5.js how to translate along axes after rotate

After I rotated an coordinates system it is translating along its new axes. Is it somehow possible to translate it along axes before rotation? Idea is that user uploads an image and then he can ...
greg's user avatar
  • 1,897
1 vote
1 answer
687 views

JavaFX 8 strokeText unexpected behaviour

strokeText uses setLineWidth for the width of the stroke. If I set the lineWidth to 0.0 however (expecting a stroke of 0.0 i.e. no stroke at all), it actually strokes the text with the previously set ...
Frank's user avatar
  • 531
1 vote
0 answers
246 views

Facebook Canvas remove outer scroll

I am trying to remove the Outer scroll of the Facebook canvas while keeping the inner Iframe scroll I have. I have tried using FB.Canvas.setSize() and the FB.Canvas.setAutoGrow(), I also tried with ...
Jony-Y's user avatar
  • 1,579
1 vote
0 answers
430 views

Disable Fabric JS brush

I have a simple stamp tool, which places a translucent geometrical shape like star, hexagon on mouse down, moves it on mouse move from its center and places it fully opaque on mouse up. But, it is ...
Nikhil Khullar's user avatar
1 vote
1 answer
691 views

Android Canvas onDraw problems when onResume

i have one little problem with the canvas in android. I am programming a scanner. The function of the scanner works perfectly. But my goal is it to draw some rectangles into the scanner, that it looks ...
Tobi's user avatar
  • 11
1 vote
1 answer
181 views

Issues with canvas.getContext("2d").getImageData(x,y,1,1).data in chrome and firefox

Recently I have been programming and have run across inconsistencies between browsers with the document.getElementById(canvasId).getContext("2d").getImageData(x, y, 1, 1).data; command. I have an ...
perennial_'s user avatar
  • 1,826
1 vote
0 answers
70 views

Accelerating matplotlib figure update

I am using Python 2.7.9 with matplotlib to display live data taken from a microcontroller in a FigureCanvasTKAgg. The figure itself must always display the last 100 points and resize the Y axis to ...
RaduB's user avatar
  • 11
1 vote
2 answers
123 views

Draw multiple shapes as one

I'm working on a javascript application where I draw a map using polygons on a html canvas, these polygons have different colors and shadows depending on what they represent. For example, forests are ...
Oli414's user avatar
  • 346
1 vote
1 answer
160 views

Resizing base64 image does not work in Firefox

I tried many different ways, but in Firefox, when I resize the first time, it returns a blank image: function imageToDataUri(img, width, height) { var canvas = document.createElement('canvas'); ctx ...
A D's user avatar
  • 21
1 vote
1 answer
74 views

Player not showing up on canvas (Javascript + html + css)

I have a file called index.html that I am putting an html5 game on. All I have done so far is created a canvas, <canvas id="mainCanvas"></canvas> that is 25% of the browser's width, and ...
user avatar
1 vote
0 answers
203 views

Drag and drop multiple images kineticjs

I am trying to drag and drop multiple images into a canvas and they can be moved into the canvas. It works for one, but when doing multiples, the last one replaces all the others. This is the code: &...
adrien's user avatar
  • 21
1 vote
1 answer
59 views

HTML5 Canvas Drawing App Issue

I have implement all the function to draw on the canvas like drawFree,Line,Triangle,Star But when I am Selecting other tool,it also draw the previous figure ex:If I have Selected drawFree at first ...
Flicks Gorger's user avatar
1 vote
3 answers
841 views

Using Fabric.js, when an image is scaled, how do you replace it with another image?

I'm building a new version of my online t-shirt designer using FabricJS to replace an existing Flash one that I created several years ago. I've run into a problem that I need help with. All images ...
Lonnie's user avatar
  • 63
1 vote
0 answers
760 views

FabricJS canvas on drag over event fires after drop event

Have such code : var $canvas = $("#canvas"); var canvas = new fabric.Canvas('canvas', { hoverCursor: 'pointer', selection: false }); var rect1 = new fabric.Rect({ width: 200, ...
Arthur's user avatar
  • 179
1 vote
1 answer
55 views

Tap Draw On a Section of the Screen?

I'm trying to make my app be able to draw with your finger like Snapchat on part of the screen but not the whole thing? Every example I have seen of drawing is just an app that turns your whole screen ...
Seeray's user avatar
  • 11
1 vote
0 answers
673 views

How to make canvas cursor image dynamic using css or javascript

I’m building a canvas drawing app, where can I select different colors from color tool, how can I make canvas cursor image dynamic filled with selected color? Thanks in advance, following was the code ...
lekha pillai's user avatar
1 vote
0 answers
69 views

Perfomance issue with canvas in Firefox

I need to do some animated transformations with images using canvas. Simple demonstration is in my fiddle, it's just a canvas, filled with pattern and rotated using requestAnimationFrame. It works ...
Max Vorozhcov's user avatar
1 vote
0 answers
450 views

Canvas Jigsaw Puzzle - Animation While Joining Pieces

I am trying make a jigsaw puzzle game which looks like this. What I have tried it looks like this. http://jsfiddle.net/Renjith_Rajendran/nx84ujop/2/ Now ,I need an animation while joining two pieces. ...
renjith kattappana's user avatar
1 vote
1 answer
166 views

Zooming and Drawing on Canvas with Touch events

I have a Windows Store App that looks like a Paint App where I can draw using Touch events (InkManager class with Pointer events) and I can zoom (Zoom the Canvas contained into a ScrollViewer after ...
yalematta's user avatar
  • 1,389
1 vote
1 answer
190 views

Tranfer data between canvas with pubnub and webrtc successfully

I am trying to implement a small app (example in order to make my main app to work) where when the user from one canvas clicks a button, the other user's channels numbers changes in order to become ...
mpla_mpla's user avatar
  • 323
1 vote
2 answers
847 views

Creating image from canvas results in blank image in firefox

Okay I found out what the problem was. Every time you say new Image() you HAVE to use the onload handler to ensure that the image has really load. Even if you assign the src attr via toDataURL. I ...
OOPDeveloper89's user avatar
1 vote
0 answers
873 views

Convert png to monochrome bmp - android

I am developing an application in which I draw black n white drawing on canvas and save it in png format now I bought a pos printer for which I need drawing in monochrome bmp format , how can I save ...
Bilal Haider's user avatar
1 vote
0 answers
356 views

Hide or readonlify inherited DependencyProperty of a child WPF control at design-time

It is possible to somehow hide (from the designer property pane) a preexisting dependency property on a custom canvas' child controls, or modify their metadata, or make them read-only? . Below are ...
Shambler0's user avatar
1 vote
0 answers
254 views

Beginning Android Games-AndroidFastRenderView class code explaination

I am learning Android game programming from this book - Beginning Android Games. I cannot understand the code in AndroidFastRenderView class run() method. Canvas canvas = holder.lockCanvas(); canvas....
Santosh's user avatar
  • 153
1 vote
0 answers
258 views

Intercept design-time dragging and resizing of custom WPF canvas child controls

I was able to add design-time adorner to a WPF control, but how do I take control over those built-into the designer? (in other words, I want my function to be called when anyone drags or resizes a ...
Shambler0's user avatar
1 vote
1 answer
54 views

Various paint objects in Activity

I'm dealing with a canvas where I have to draw several elements of different types, thus several different paint objects. What I want to know is which is more efficient, creating different pain ...
Luís Filipe Longo's user avatar
1 vote
0 answers
239 views

drawRect() not working when partially off screen Android

The app I am building draws multiple objects on the screen at the same time. When one of the Squares it draws, using drawRect(), is partially off the screen it disappears. I add it to the canvas with ...
Travis Knight's user avatar
1 vote
1 answer
247 views

getPixel() giving 0 for PNG Bitmap:Android

I am facing this problem for 2 days now. I am making a 2D game via Canvas and it has a PNG file which I am drawing on the canvas by drawBitmap(), and it works fine. But for Per-Pixel-Collision ...
Sucho's user avatar
  • 321
1 vote
1 answer
2k views

adjusting canvas to fit screen on scroll

I have a canvas element dynamically created which overlays every other element. On resize, the canvas fits to the screen perfectly without any trouble. I figured that the same principle would work ...
NOFNe's user avatar
  • 35
1 vote
0 answers
394 views

matplotlib toolbar does not work in tkinter gui

I wanna control my plot embedded in a tkinter gui with a navigationtoolbar here my code: import matplotlib matplotlib.use("tkagg") import matplotlib.pyplot as plt from matplotlib.backends....
user47091's user avatar
  • 533
1 vote
0 answers
924 views

Rendering a tile map on html5 canvas using and array and fillRect

I'm very much an amateur enthusiast trying to make a basic 2d game map with html canvas. I've done this before by using arrays to create div/img tags and position them. I'm now trying to do this with ...
Cerpin Taxt's user avatar
1 vote
0 answers
2k views

how to create a grid using canvas in android studio

I am trying to create a 10x10 grid in android studio that will display in the center of the screen, i am trying to use a for loop to do this but cant get it right. Does anyone know how to do this, ive ...
Ciaran's user avatar
  • 697

1
335 336
337
338 339
723