Questions tagged [html5-canvas]

Canvas is an HTML element that allows for dynamic, scriptable rendering of 2D shapes, 3D shapes, bitmap images and animations in both 2D and 3D.

-1
votes
0answers
18 views

Drawing canvas rectangle over person faces in a video player

I have to show bounding box over faces in video. I have used video js media player. For every scene/frame I am getting bounding polygon vertices coordinates for every face present in that video. Since ...
0
votes
0answers
23 views

How do I set a Canvas shape to rotate with arrow keys?

I would like the left and right arrow keys to rotate my canvas shape clockwise and anticlockwise, respectively. How do you suggest I go about this ? In this code, the left and right keys move the ...
0
votes
0answers
16 views

HTML Canvas via Javacript Performance Tips/Advice [duplicate]

So I am creating a specific piece of code that renders pixels from left to right on each column, and I have coded something that works just fine, but takes about 15 seconds to render a small (230px x ...
0
votes
0answers
19 views

Setting font styles to OffscreenCanvas

Is it possible to set font-kerning styles (or any other font style) to OffscreenCanvas? In the example below I want to disable font kerning. Left: Canvas element, Right: OffscreenCanvas The example ...
0
votes
1answer
41 views

How to convert the raw image byte array to PNG image using Javascript

I have a raw image (in .raw format without any image header), which I want to convert to PNG format to display on canvas. I tried to convert the raw image to RGBA and it was successful(by manipulating ...
-1
votes
0answers
14 views

Drag and Drop cell data from one table to another and keep the dragged element in the table

I have to implement a drag and drop functionality from table 1 to table 2. Each cell data in table 1 is draggable to any table2(row,column). Also, table 1 data should be retained. I'm new to front ...
0
votes
0answers
37 views

Count polygons of different colors on canvas

I have several intersecting semitransparent polygons, which divides the canvas on some number of other polygons of different colors. Here is an example with 3 triangles: How I can calculate the ...
0
votes
0answers
38 views

Web Cam stopped rendering video to the canvas JavaScript

I had a webcam application that took pictures and I would then take the picture from the image data base64 to database, but all of a sudden it stopped working, I followed an example online here I ...
0
votes
2answers
46 views

Create the links using javascript

I have a implemented boostrap 4 navbar, and have a function that creates links. It works and is there any efficient method to do in javascript. I have three function that creates link for each ...
0
votes
2answers
36 views

Using a timeout to make a jump function

I am making a game in html5 canvas. I have gotten the player to more. When making the jump function I decided to use a time to reverse the coordinates back to the original after a set time. The ...
0
votes
1answer
30 views

How to overlap 2 images from 2 canvas?

I'm trying to overlay 2 images , the thing is I have them in 2 canvas elements. I want to get the images from the canvas elements , to somehow parse them byte by byte and do the following thing : The ...
0
votes
0answers
23 views

html5 canvas will not go wider

I have a image, that I am using for a background in html5 canvas. The image will not go wider than 300px. I have tried to widen it in the canvas. When I widen it in CSS it stretches the image. The ...
0
votes
1answer
34 views

How to generate thumbnails from video which comes from json?

I have a simple sidebar which contains videos from JSON each video have an edit button, now when U click edit button a modal opens up containing a video. Here is a working demo live demo without ...
0
votes
1answer
32 views

How to capture thumbnails (frame) from video with HTML5 and Jquery?

I have a simple block in which I would like to capture a frame from video every 5 seconds and display them something like this below. Here is a solution I have tried. <video id="video" controls="...
2
votes
1answer
33 views

How to move an object in canvas with arrows?

Someone please can help me with an object moving automatically when I click on the right arrow in canvas. My code is if(e.keyCode == 39) { bullet.x = +5; setTimeout(function() { ...
0
votes
1answer
20 views

Phaser 2: game does`t load into WebView

My application works fine in a browser on a computer and a phone chrome, but it doesn’t download to the end through WebViev of another application. I enabled debugging in this application and look at ...
0
votes
1answer
25 views

HTML5-Canvas: how to remove the just painted object?

I have a problem with HTML 5 Canvas. I want to do kind of "versioning". So I want to be able to draw several lines with canvas. But then with a button I want to be able to delete as many drawn lines ...
-1
votes
1answer
38 views

Drawing a image from lines using html5 canvas [on hold]

I want to draw an image on the canvas. it should start with lines and it becomes an image. something like the below image (Right to left transformation example) Beginning it should be a plane canvas. ...
0
votes
0answers
17 views

Is it possible to draw a track plot in HTML5-Canvas using GPS coordinates?

i have a quick question for a school project, in which i have to build a small website using HTML and JavaScript. Is it possible to draw a track plot onto an HTML5-Canvas, using only GPS coordinates (...
1
vote
0answers
27 views

Google Chrome Not Showing Image html5 canvas in Print Preview

I have some code to create function print canvas. Google Chrome is not showing in the print preview, but other browsers are working fine. How can I get it to work in Chrome also function print() ...
-4
votes
0answers
9 views

Looking for tachograph web implementation [closed]

We are looking for a web implementation of a tachograph which could be built with angular, html5 or any web technology. Could anyone help us ? Thanks.
0
votes
0answers
19 views

Is it possible to record a video of the contents of an HTML element?

So I want to use javascript and css to create an animated video of maps. I imagined to do some animations using leaflet etc and use some javascript to record a video of it. However so far I found ...
0
votes
1answer
17 views

Draw a rectangle over a background image in HTML5 Canvas on Angular.js

I want to draw a rectangle over a background image on canvas using angular.js. I can draw it by placing the rectangle code inside the image.onload function.But I want them to be separated.How can I do ...
-4
votes
1answer
23 views

Recommend js framework / library for primitive UI responsive graphics [closed]

Please recommend simple lightweight opensource 2D graphics js library that allows to do this: Draw primitives on canvas: circle, line (with width), polygon, text, put an icon. All of the primitives ...
0
votes
2answers
37 views

Html5 canvas animation leaves a trail

I'm trying to make a little game to play around with canvas. I've decided to go for Flappy Bird as there are plenty of examples online. My goal was to make the game "responsive" for all devices. If ...
1
vote
1answer
30 views

How to make a number that is equal to all numbers

I am making a platformer game that has multiple levels. I have code written so that a certain platform object only draws and has collision detection if its level property is equal to the current level....
-1
votes
0answers
19 views

How to use writing pen/pad on Javascript Canvas

I have an App with a Javascript Canvas for drawing but it doesnt work with my writing pen/pad. It only works with a mouse. When I use a writing pen device like the Genius mousepen or WACOM, I can't ...
1
vote
1answer
23 views

Reduce the dimension of base64 image maintaining aspect ratio in javascript

I have a base64 string for an image, which i have to display as an icon. If the dimension of an image are bigger i have to display icon maintaining aspect ratio. I have written a logic to identify if ...
-10
votes
0answers
42 views

I am interested in learning canvas [closed]

i am new to web development and wants to learn these new cool canvas effects is there a recommendation where to start from any good course or a workshop whatever. i really love these effects and want ...
0
votes
0answers
8 views

Pretend overlapping of randomly placed objects inside a canvas

I amm generating randomly placed objects (circles) in my canvas but I don't want them to intersect or overlap each other. I have already tried similar answers on StackOverflow and the closest I could ...
0
votes
0answers
14 views

How to reduce Fabric.js memory usage when importing SVG files with clipPaths

I'm running into WebKit memory limits with a Fabric.js instance when viewing on mobile devices, and could use some help figuring out the best plan of attack. Total canvas memory use exceeds the ...
0
votes
0answers
16 views

FabricJS zoomIn and zoomOut off-sets background image

I am trying to implement a zoomIn and zoomOut feature for my canvas that has a background image set on it. Zooming in and out works except when I zoomOut the background image which has been set take ...
1
vote
1answer
31 views

I am trying to move my character with the arrow keys but it doesn't move

I want to make my character move using the arrow keys, but it is not working and I have no idea why. This is for an offline shooter game I'm trying to make. I have tried not using objects but this ...
0
votes
1answer
24 views

Drawing random rectangles on the parent rectangle as in the image using canvas

I have parent rectangle and i want to add upto 10 or less rectangles on the right hand side corner of the parent rectangle as in the image I wrote a code to do so but it is not aligned centre from ...
0
votes
0answers
34 views

Canvas to blob support in IE 11

I am using react-image-crop (https://github.com/DominicTobias/react-image-crop) within my react app to crop images: I know that IE 11 does not support toBlob and was trying to use this polyfill: ...
3
votes
0answers
46 views

Change the font of HTML5 Canvas using a button in Angular.js

I want to change the font of my HTML canvas using a button.When I will click in this button, a function in my angularjs file will trigger and the font will be changed.But nothing actually happening ...
0
votes
1answer
19 views

FabricJS not render SVG correct when SVG include text with custom font?

I have a problem with render SVG in fabricjs when SVG include text with custom font. How to make SVG in Fabricjs display correct with custom font? Here is my code: var canvasObject = document....
0
votes
1answer
60 views

Memory leak with resize in drawImage

Link from my plugin: https://github.com/luisdemarchi/cordova-plugin-facedetection-lite Link from my finally code: https://github.com/luisdemarchi/example-cordova-facedetection/blob/master/www/index....
1
vote
1answer
15 views

All fillTexted text crammed in one place in HTML5 canvas

I want to display an hexagonal grid where each cell displays its coordinate in the system (thus the top leftmost cell will have a1 written in it, the one immediately right to it will have b1 written ...
0
votes
0answers
16 views

To use concentric circles on human body canvas

I am working on an application which takes input from the patient on parameters such as Headache, Cold cough etc. For doctors dashboard need to highlight body part with animation (concentric circle) ...
-1
votes
0answers
13 views

What is the best practice for including animated Html5 content in sitemaps?

I'm using a sitemap.xml file submitted to Search Console. Search engine bots are welcome to crawl my site. In the sitemap I include links to html pages. It has occurred to me that HTML5 Canvas pages ...
0
votes
0answers
11 views

To animate the human body part according to user inputs

I am working on an application which takes input from the patient on parameters such as Headache, Cold cough etc. This data will be loaded on doctor's dashboard.On doctors dashboard I intend to have ...
1
vote
1answer
27 views

How to make putImageData cover the entire canvas

I use getImageData from a canvas and display it on another canvas using putImageData. But it doesn't cover the entire canvas.It displays the picture in its original size.Is there a way to make the ...
-1
votes
0answers
12 views

How run fabricjs on node.js for automatic generate image preview on server side?

I want to generate preview from server side with Fabricjs. Please tell me the tutorial or your experience about this topic. I see introduction in the Fabricjs github, it says that: Goal section: Runs ...
0
votes
1answer
33 views

cropping a image in a canvas

I have a canvas of size 300px to 300px and I drag and drop a very large image on to it. so it takes the size of the canvas. Then I have a resizable and moveable square which I use to crop certain ...
-1
votes
1answer
34 views

If you can animate the pixelated canvas squares in JavaScript

So you can pixelate an image by drawing it on canvas like this: /* css */ .pixelate { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-...
2
votes
1answer
54 views

Unable to draw on the image after rotation it is drawing on the original canvas orientation

var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); var rw = 1560; var rh = 2080; var cw = "null"; var lw = "null"; var lh = "null"; var fh = "null"; var drag = false; ...
0
votes
1answer
12 views

Way to calculate zoom and pan using canvas and d3.js hierarchical circle structure

I currently have a d3 hierarchical circle pack graph in canvas (with help from this awesome tutorial!) I wanted to make the graph also pan with the mouse and scale with the wheel in addition to ...
1
vote
1answer
13 views

Konva.js - how to get the position of an object that is in a group

How to get a current postion of an object that is in group, when the group is dragged. I can only get a position of the group itself, but I need positions of members of the group dynamically. Example:...
0
votes
1answer
22 views

image doesn't cover the full area of the canvas

I want to stretch the image to the size of the canvas. But the image takes its original size instead of taking the canvas size.Any help is appreciated. var canvas = document....