I have four canvas in my screen, positioned two above and two below. Each one have a button that makes possible to maximize the canvas, hiding the others. This button is positioned above each canvas, with absolute position based on offsetTop and offsetLeft of the canvas. However, when I maximize or minimize a canvas, the button formula updates only the
Tag: canvas
Javascript Canvas draw rectangles or circles
I’m searching for a way to “live” draw rectangles or circles on a canvas. I found various ways with fillRect() to draw rectangles, but not live. What I mean is, to be able to mouseDown() on one point and move it to another point in the canvas, which defines the size of the canvas, just like for example in Microsoft
CSS convert gradient to the canvas version
I have a gradient that I need to apply to a canvas. I need help to convert this to the canvas API; I don’t have a clue how to do it. maybe there is an online tool? Answer Here is how you can convert the CSS gradient to canvas version …
making each canvas line draggable and droppable
I am able to draw some lines on the canvas. I want to make each line draggable and droppable. However, it is implemented by storing the positions of different lines in the array, how can I make each of them like an instance that is draggable and droppable? Or did I get it wrong? You can check out the code
Limit mouse events to Pixi.js Container
I’m using Pixi JS and detecting the mouse position via a simple event handler: However mouseX and mouseY are being updated when the mouse is outside of the stage bounds (the <canvas> element on the page). Is it possible to limit the mousemove event to within the stage? I’ve tried stage.hitArea but that didn’t work. Answer This seems to be
Saving canvas to JSON and loading JSON to canvas
I want to make it so that when I press the save button, file explorer opens and opts me to choose location to save the JSON file of the canvas. I also want to be able to load the canvas with the JSON file via the load button. How can I get started with this? Any help is appreciated. Answer
Reducing the size of the a-frame canvas to show other HTML elements
If this is possible, can I change the size of the aframe canvas in code? I would like to display a form so that users can modify object parameters in the aframe scene. Answer See this question. How to remove fullscreen styles in A-Frame, reduce canvas size, or scroll a page with A-Frame scene? You can use the embedded component
Chart area background color chartjs
I have problem with chart js, i want to coloring chart area like image above I try to find configuration from charJs Docs , but nothing matched. its possible or not to change chart area background color? if possible anyone can help me? Html Javascript Here’s my current code jsFiddle so everyone can try for find solution. thanks for your
Output of Kinect 2 on browser using Node.js and Javascript
I am trying to show the output of Kinect 2 on the web browser, following a tutorial given here, http://www.webondevices.com/xbox-kinect-2-javascript-gesture-tracking/ I have been able to get the device output as JSON objects in the browser console using this code in server.js output.html, the page where i want to show the output on a canvas looks like this the structure of
Cropping with drawImage not working in Safari
I’m working on some simple image manipulation functions with canvas. The user uploads an image, is able to rotate and crop it and then clicks ok. The image is then split in half with each half drawn mirrored to two canvas elements, like this: Original Mirrored It all works great in Chrome, Firefox, IE and Android devices. Safari won’t play