Most voted "canvas" questions
Canvas is an HTML5 element intended to delimit an area for dynamic graphics rendering. All work of creation and animation is carried out through languages of dynamic programming, for example Javascript.
Learn more…209 questions
Sort by count of
-
3
votes2
answers663
viewsCreate an animation on canvas over video
I’m making a small web application where I need, from some coordinates make a box (rectangle) move frame by frame. In my code I was able to extract the current frame of the video but I can’t make…
-
3
votes2
answers1014
viewsHow to copy a canvas to an image
I’ve been struggling to resolve this issue, which seems simple, but I’m not getting it, Maybe I am not knowing how to ask the question, then I count on the goodwill of friends: 1. I have the…
-
3
votes1
answer184
viewsHow to Place Image on X-Axis
I’m trying to put an image on this graph that represents the Labels, but how is a canvas I don’t know how to do this in Chartjs. JS myBarChart = new Chart(chartBar, { type: 'bar', data: { labels:…
-
3
votes0
answers83
viewsXamarin Android - Create a line where your finger goes
Hello, I would like to create a straight or rectangular, where my finger goes. Actually, it doesn’t have to be exactly where you go, but on top of every button I pass the finger it will increase the…
-
3
votes1
answer151
viewsHow to put the same animation on two canvas at the same time?
I have an animation on "Html5 Canvas" (using Flot Real Time) and now I need it to be cloned in real time for a new canvas, ie draw the same thing on 2 canvas at the same time. So I just tried to…
-
3
votes0
answers210
viewsHow to place particlejs on a Parallax banner with text in the center
I wonder how I can put the effect Particlejs in a banner Parallax with a text in the center of the div. Thus: For example, in this banner I wanted, in the center of it, there to be a text and the…
-
3
votes1
answer115
viewsWhy is my canvas not working properly?
let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 50, 50); #canvas { width: 500px; height: 500px; background: red; }…
-
3
votes2
answers177
viewsHow to insert objects using canvas (javascript) and avoid 2 objects in the same position
I’m doing a canvas test to randomly insert various polka dots into a rectangle. I use a random position for each ball, as long as the limit is less than the width of the rectangle. So far so good,…
-
3
votes0
answers42
viewsHow to listen to coordinate changes on a canvas via a mobile device?
I created this component in Angular that has a canvas and when the user clicks and drags on that frame, the canvas is filled with coordinates positions. I tried to reproduce this same behavior in a…
-
2
votes1
answer491
viewsJavascript Constructor for Canvas Drawimage function
I need to draw several images on several canvas, so I would like to do a generic function that allows me to pass the arguments to draw the positioned images. I thought about the following generic…
-
2
votes1
answer1421
viewsCanvas occupy the entire screen with css
I have my canvas on Html5: <canvas></canvas> I want the canvas to occupy all available area of the browser, I tried to do as follows: canvas{ display: block; width: 100%; Height: 100%;…
-
2
votes1
answer240
viewsAcquiring Javascript coordinates with the help of the Camanjs library
I am here creating an image editor using Javascript with the help of the library Camanjs and the HTML5 canvas element, but I’m not getting him to draw a box on top of my image (it disappears as soon…
-
2
votes1
answer433
viewsDraw Regular Polygons inscribed in a circle with Canvas in Javafx
Mind you, this is a method I’ve developed to create the vertices of regular polygons inscribed in a radius circumference r @Override public float calcularRaio(float lado, int numeroLados) {//…
-
2
votes2
answers3254
viewsResizing image with canvas and Javascript
How to reduce the size of an image with JavaScript? I’m using canvas to resize, reduce the size in proportion and convert to jpeg. The problem occurs when I try to save the image, since I cannot…
-
2
votes2
answers598
viewsHow to put a click event in a primitive drawn form?
I made an animation and would like to put the buttons pause and play using these drawings in primitive forms. function botaoPlay() { contexto.beginPath(); contexto.fillStyle = "rgb(255,255,0)";…
-
2
votes1
answer54
viewsProblems animating sprites with javas canvas
I’m trying to animate some Sprites Sheets, but I’m having a problem regarding a certain "shadow" that is after the canvas runs the animation frame, it would be the previous frame, I can’t fix it.…
-
2
votes1
answer763
viewsHow to create a Gif with Canvas content
I would like to know how to create a gif from a canvas, in this canvas I have a sequence of scenes, after the scenes were created I wanted to read all the scenes and then save them as one . gif…
-
2
votes1
answer193
viewsHow do I "onload" on NODE.JS? (Discord.js)
I’ve been trying to make a code for generate an image in Node.js using Canvas, but I am facing the problem that the image is not loaded before using it. I tried to use "onload" but it didn’t work…
-
2
votes0
answers77
viewsWhy does it only work as expected the second time?
I have that function: for (var i in chars) { chars[i].walk(); for (var j in chars) { if (i != j) { collision(chars[i], chars[j]); action(chars[i], chars[j]); } } } Does it work in an unexpected way…
-
2
votes2
answers197
viewsWhy window.innerheight/ window.innerWindow does not work with Document.getelementsbytagname('canvas');
Why doesn’t it work? const canvas = document.getElementsByTagName('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight And that’s what? const canvas =…
-
2
votes1
answer116
viewsjspadf and canvas, does not screenshot the full modal
I have the following code on the page where I check the data with the modal (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){…
-
2
votes1
answer168
viewsStop animation with requestAnimationFrame on canvas
I’m using the Canvas to do this https://jsfiddle.net/m42hu8zg/ , only that I would like to stop the animation by clicking on div using some functionality of requestAnimationFrame. I used the…
-
2
votes1
answer560
viewsText inside circle with canvas
I’m starting in canvas and despite very good documents by the web, specific questions arise. For example, I’d like to put a number inside a circle, but I’ve only got the number, not the circle. I…
-
2
votes1
answer2654
viewsHow to add onclick event to play audio on canvas?
By clicking on an image I want to perform a sound. How can I do this function using the event onclick? Code: window.onload = function myCanvas() { var c = document.getElementById("myCanvas"); var…
-
2
votes1
answer159
viewsGraphic made with imperfection Javascript canvas
Guys I made a normal Cartesian plan here on a canvas, but with a problem, the chart is not perfectly centered and this is bothering me a bit, I know q I can change the position manually in code, but…
-
2
votes0
answers256
viewsMount a javascript ruler with array
I need to assemble a ruler like the drawing. I’m having trouble finding a logic so I’d like a help. Setting: There are two arrays (one with temperature data and the other with pressure data). I need…
-
2
votes0
answers52
viewsEDGE can’t copy large images using JS from/to a canvas?
I have the following code, which copies pieces of the image "smoothchartshowAnalisysCopy" (500px X 250px) to the larger image (32172px X 250px). var c =…
-
2
votes1
answer136
viewscanvas - Fill a semi smile with the color red
Good evening guys, here’s the thing, I need to fill the smile of Snowman in red. But I’m not succeeding, I don’t know if it’s because I’m having some mistake in the code or if I’m drawing the wrong…
-
2
votes0
answers322
viewsCanvas loses quality while saving video frame
I’m using a function that captures a frame of the video to later define it as thumbnail. function thumbnail() { var canvas = document.getElementById('thumb');…
-
2
votes2
answers48
viewsHow to do quicksort animation with canvas
I tried redesigning the canvas every time it swaps, but it first renders everything and then draws. I would like each Swap to redesign the canvas with the object information. <!DOCTYPE html>…
-
2
votes1
answer188
viewsCanvas increasing the animation speed with each change of animation
I’m animating some sprites from LPC on a canvas, using Javascript. However, every time I change animation, the animation starts to get faster. The test can be done in the code below. Just press any…
-
2
votes1
answer33
viewsWhy is this little green ball able to rewind, in animation, using this conditional?
I have a javascript code that makes an animation of a green ball that moves until it reaches the limit of the width of the window, causing the ball to return, do the opposite, until it reaches the…
-
2
votes1
answer3130
viewsPlace background image in HTML canvas
I’m trying to learn a little more about canvas for Html5 games. var canvas;//o elemento canvas sobre o qual desenharemos var ctx;//o "contexto" da canvas que será utilizado (2D ou 3D) var dx = 5;//a…
-
2
votes1
answer141
viewsPerspective effect with Javascript Canvas
I need to fill this figure so that the image is slightly distorted, giving a perspective effect. I believe it is possible with the setTransform(), but I still don’t understand how it works to…
-
2
votes1
answer121
viewsProblem with animation of a sort algorithm
Good evening, I’m looking to do a simple bar animation of the sort algorithm bubblesort using canvas of html together with javascript but for some reason the bars don’t change position, as if they…
-
2
votes0
answers28
viewsProblems with toDataUrl
I am trying to export to a text file the contents of a canvas with toDataUrl(), but I’m getting this mistake: Domexception: Failed to execute 'toDataURL' on 'Htmlcanvaselement': Tainted canvases may…
-
1
votes1
answer65
viewstouchEnter/touchLeave do not work
Talk to the guys! My question is the following: Why these touch events are not being recognized when I enter the DOM element with my finger, or when I leave it? var canvasControlsHUD =…
-
1
votes1
answer114
viewsCustomer side image manipulation
A challenge has arisen, I need to know how/which tools can help me create an area that I can manipulate image on the client side. I need to develop a website that creates custom shirts, something…
-
1
votes1
answer95
viewsRecover disk image via callback
Well, I am developing a feature that aims to upload an image (this step has already been accomplished) and soon after I "recover" the same to perform the selection of some color in it (Colorpicker…
-
1
votes1
answer92
viewsDimension of a display - Android Canvas
I’m doing some tests with an image on Android using the Canvas class. I’m using a Samsung Galaxy Mini S3 and a Samsung Galaxy S2. Physically the appliances are different (the screen of the S2 is…
-
1
votes0
answers49
viewsProblem with minimum size in chartj chart
var config = { type: 'radar', data: { labels: ["Confiança", "Atividade", "Juros", "Condições de financiamento", "Concessões reais", "Atratividade do Financiamento Imobiliário", "Emprego", "Massa…
-
1
votes1
answer145
viewsCanvas - draw repeated image
How can I draw an image repeating it until it fills an area? Something like the effect of the CSS property background-repeat. Where the image is repeated until it fills the entire tag area.…
-
1
votes2
answers57
viewsWhen I try to make a canvas not error but also does nothing
I wish I knew what I’m doing wrong here... <script type="text/javascript"> function draw() { if (!Modernizr.canvas) return; { var canvas = document.getElementById("mycanvas"); var ctx =…
-
1
votes1
answer107
viewsInvert y value on canvas
I wonder if there is a way to reverse the y axis of the canvas so that the point (0,0) is actually the point (0,500).... That is, if I play the value 20 in the Y, instead of starting from top to…
-
1
votes0
answers95
viewsChange color according to the beat of the song
I’m creating a music player and I need the frequency bars to change color as the beats stronger. I managed to do it https://codepen.io/salomaosnff/pen/eezgVL but it’s too fast.…
-
1
votes1
answer146
viewsMove Sprite to the mouse position with Phaser
I need to move a Sprite to the mouse position, I used the function game.physics.arcade.moveToPointer(), but only works with sprites who have the body of the type Phaser.Physics.Arcade. How do I use…
-
1
votes2
answers171
viewsSVG, Canvas or CSS? Need to network with interlinked images
Well, that’s it. I thought about using SVG and image with borders but my concern is about responsiveness, in smaller devices will get all messy I wanted a way for the lines to automatically connect…
-
1
votes1
answer163
viewsProblems with canvas inside a Webview in React Native
Why when changing the height > 100 and width > 640 on the canvas inside a Webview in React Nenable, nothing more and drawing? //funciona ... canvas.width = 640; canvas.height = 100;…
-
1
votes2
answers436
viewsOnclick on Canvas
I have an image and on top of it is drawn a canvas. I need that when I click on the image it opens to normal size with the canvas design. For now I click on the image and just open it, the canvas…
-
1
votes1
answer109
viewsHTML5 Canvas Arc() is not the correct size
I am developing a college job that consists basically in creating a kind of "Paint" using the canvas HTML5 in conjunction with Javascript, but came across a problem when trying to update a canvas…