Questions tagged [canvas]

Canvas serves as a universal name employed for the artistic platform utilized by numerous spontaneous visual output APIs. Pair this label alongside other tags signifying the distinct graphics API being applied, in conjunction with the programming language and intended setting: [android], [uwp], [wpf], [tkinter], [java], [html5], [chart.js] and so forth. It is also advisable to incorporate an explicit canvas tag like [android-canvas], [html5-canvas], [tkinter-canvas] where relevant.

Working with high-resolution images on HTML5 canvas

I am faced with a challenge of incorporating a 15000x15000 px vector image as the backdrop for my canvas project. It is essential to crop specific sections of this image swiftly and consistently, especially within requestAnimationFrame. My current method ...

javascriptimagecanvashtml5-canvas

Determine the percentage of clicks on an HTML5 canvas radial progress bar

Recently, I designed a circular progress bar displaying a specific percentage. However, I am facing a challenge in determining how to calculate the percentage when a user clicks on either the black or green part of the circle. Could you provide insight on ...

javascriptjqueryhtmlcanvas

Interactive html5 canvas game with swiping mechanism

Currently, I am in the research phase for a new HTML5 canvas game that I want to create as a personal project to enhance my skills. Surprisingly, I have not been able to find any valuable articles or tutorials online about creating swipe-based games. The ...

javascriptjqueryhtmlcanvas

The error "clearRect is not defined in javascript" occurs when the property is being called on an undefined object in the JavaScript

I've encountered a similar question before, but unfortunately, the solution provided didn't help me! I'm relatively new to JavaScript and have been struggling with this issue for nearly a day now without success. The structure of my class a ...

javascriptcanvas

Developing a custom camera system for a top-down RPG game using Javascript Canvas

What specific question do I have to ask now? My goal is to implement a "viewport" camera effect that will track the player without moving the background I am integrating websocket support and planning to render additional characters on the map - movement ...

javascripttypescriptcanvashtml5-canvas

Painting Magic: Exploring the World of Canvas Zoom and Moves

I'm having trouble implementing zoom and pan functionality for this particular canvas drawing. While there are examples available for images, my case is different since I am not working with images. Any tips or suggestions on which libraries to use would b ...

javascriptjqueryhtmlcanvashtml5-canvas

Sketch a straight path starting from the coordinates x,y at a specified angle and length

Is there a way to draw a line in Javascript starting from a specific x/y position with a given length and angle, without having to define two separate points? I have the x/y origin, angle, and length available. The line should be placed on top of a regula ...

javascripthtmlcanvas

Seeking assistance in optimizing my Javascript code for more efficient canvas rendering

I've created a script for generating random moving lines as a background element for my portfolio. While it runs smoothly on its own, I encounter frame drops when combining it with other CSS animations and effects, especially at the beginning (although it ...

javascripthtmlcssanimationcanvas

Ajax-enabled pre-resize feature for efficient multiple file uploads

I'm currently facing an issue with a function that involves pre-resizing and ajax file uploading. I have a FOR loop which calls this function, depending on the length of the file input size. The strange thing is, sometimes when I call it multiple times, th ...

jqueryajaxcanvasfile-uploadreader

Changing the size of an image in an HTML5 canvas

I have been attempting to generate a thumbnail image on the client side using Javascript and a canvas element. However, when I reduce the size of the image, it appears distorted. It seems as though the resizing is being done with 'Nearest Neighbor' interpo ...

javascripthtmlcanvasimage-resizing

What is the best way to adjust the size of a canvas and then upload the resized information to a

I need to update the user's database table row data with new resized dimensions (changing width and height). For instance: In my online editor, I create a canvas of size 1000x500, add objects, and save -> This data is sent to the database When re ...

javascriptphpdatabasecanvas

Changing the position of an image can vary across different devices when using HTML5 Canvas

I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...

javascriptcsscanvascordovahtml5-canvas

Tips for adjusting the size of an HTML canvas to fit the screen while preserving the aspect ratio and ensuring the canvas remains fully visible

I'm working on a game project using HTML canvas and javascript. The canvas I am using has dimensions of 1280 x 720 px with a 16:9 aspect ratio. My goal is to have the game displayed at fullscreen, but with black bars shown if the screen ratio is not 1 ...

javascripthtmlcsscanvas

How can private data be shown on a multiplayer HTML5 canvas game using socketIO in a Node/Express server?

One challenge I've encountered while working on my online canvas game using Node/Express and socketIO is the ability to display private data for individual players. So far, everything has been smooth sailing when it comes to displaying public information t ...

expresscanvassocket.iomultiplayer

Working with HTML5 Canvas to Clip Images

Is there a way to implement a tileset image in canvas like this one? I am trying to figure out how to make it so that clicking on the first tile returns 0, clicking on the tenth tile returns 9, and so on... Any suggestions on how to clip a tileset on an ...

javascripthtmlcanvas

Adjust the canvas size to fit its parent element ion-grid

I am currently working on an Ionic 3 component that displays a grid of images connected by a canvas overlay. I have utilized Ionic's ion-grid, but I am facing an issue with resizing the canvas. The problem is that I cannot determine the correct dimension ...

javascripthtmlcanvasflexboxionic3

Utilizing JavaScript to dynamically set the height and width of a canvas based on the user input

How can I take user input for height and width values and apply them to a newly created canvas? I am able to retrieve the values, but I'm unsure how to set them as the style.height and style.width properties. var createNewCanvas = document.getElementByI ...

javascriptcsshtmlcanvas

Creating spinboxes in Python and retrieving integer data from them instead of strings

I'm currently working on developing a calculator application that provides an estimate of annual gas expenses. In order to execute the program, I need to use an algorithm that retrieves input data from spinboxes as integers. However, when attempting to run ...

pythoncanvastkinterinttkinter-canvas

What is the best way to create random integers using JavaScript?

Is there a way to create a function called drawSomething(x, y, color, boolean) that will generate random integers for the position of x and y on the canvas, randomly select a color from red, yellow, or blue, and randomly assign true or false to the boole ...

javascriptarrayscanvasrandom

Creating a polyBezier or polyCurve with Canvas HTML: a step-by-step guide

Looking to connect several points with a curve rather than just a straight line. I attempted using the lineTo() and bezierCurveTo() methods to draw the points. Is there anyone who can assist me in solving this dilemma? Perhaps there is a different approac ...

javascripthtmlcanvas

Tips on sending an image to a WebMethod through jQuery

I have a WebMethod in ASP.NET that looks like this. [WebMethod] public static void AddCameraImage(string imageArray) { //do something } Currently, I am trying to read an image from a canvas element and then POST it to the above met ...

jqueryasp.netajaxcanvaswebmethod

HTML5 canvas processing causing web worker to run out of memory

Within the Main thread: The source image array is obtained using the getImageData method. It is represented as a uint8ClampedArray to store the image data. Below is the code executed in a web worker: (This operation generates a high-resolution image, but ...

javascripthtmlmultithreadingcanvasweb-worker

Unleash the potential of a never-ending expansion for grid cells on Canvas

ts: templateStyle = { display: 'grid', 'grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px)', 'grid-template-rows': '150px auto auto', 'grid-gap': '10px', border: '1px solid #2196F3', pad ...

htmlcssangulartypescriptcanvas

Tips for adjusting the size of a drawing on an HTML 5 canvas within a personalized Polymer component

In my custom Polymer element, I am looking to dynamically resize an html5 canvas when the window resize event occurs. Despite trying to utilize the window.onresize event, I encountered difficulties with accessing canvas functions. One of the functionalit ...

javascripthtmlcanvaspolymer

Exploring the capabilities of HTML5 canvas and integrating it with Selenium using Python

I have been working on testing a web server that is built using HTML5 with a canvas. While examining the source code for the login page, I noticed very minimal content. However, upon inspecting the element in Chrome, I discovered the following snippet: &l ...

pythonhtmlseleniumcanvas

Images cascading like a downpour on a canvas (Javascript)

I have been experimenting with canvas, attempting to create a simulation of random falling objects. I've successfully drawn the background image, but I'm having trouble with the second image that is supposed to simulate a rain drop. I've managed to get th ...

javascriptcanvas

Are there any similar tools to Graphstream in Java that can be used with HTML5 using canvas and JavaScript?

GraphStream is a revolutionary graph library created in Java that offers Java developers a simple way to visually represent dynamic graphs either in memory, on screen, or in files. Check out this demo video. With GraphStream, you can effectively handle th ...

javajavascripthtmlcanvasgraph

After zooming in on the canvas and panning, I encountered a problem where I was unable to drag objects within the canvas. Instead, the canvas continued to pan as I tried to move the objects

1) I have the ability to pan the canvas and drag images without scaling or zooming. 2) When scaling or zooming, I can still drag images within the canvas. 3) However, if I try to pan the canvas after zooming and then attempt to drag images, only the canv ...

javascriptjquerycanvas3d2d

Maximizing CSS opacity for optimal performance in image fading

I'm working on creating a smooth fade in-out effect for the images in my photo gallery by adjusting the CSS opacity value using JavaScript. However, I've noticed that this process is quite sluggish on certain computers, such as my relatively new ...

javascriptcsshtmlcanvas

Stop all animations in JS and CSS

Looking for a way to halt all CSS and JavaScript animations, including canvas and webGL effects, on a specific webpage. Some animations can cause slow performance on certain browsers like Opera and Firefox, so I'm seeking a code snippet or guidance o ...

javascriptjqueryhtmlcsscanvas

Creating a masterpiece on the final piece of paper

As someone who is new to programming with JavaScript and canvas, I have a function called drawLines(canvasIndex, startPosition) that is used to draw lines on a canvas. The function takes in two arguments: canvasIndex, which represents the canvas being draw ...

javascripthtmlcanvas

Detecting Pixel Colors Across Multiple Overlapping Canvases

I have a challenge with multiple canvas elements on my webpage. I am trying to retrieve the pixel color of all overlapping canvas elements when they are stacked on top of each other. Let me illustrate with an example below. In this scenario, I am attempt ...

javascriptcsshtmlcanvas

Learn to save Canvas graphics as an image file with the powerful combination of fabric.js and React

I am currently utilizing fabric.js in a React application. I encountered an issue while attempting to export the entire canvas as an image, outlined below: The canvas resets after clicking the export button. When zoomed or panned, I am unable to export co ...

javascriptreactjscanvasfabricjs

Displaying a preloaded image on the canvas

Once again, I find myself in unfamiliar territory but faced with the task of preloading images and then displaying them on the page once all elements (including xml files etc.) are loaded. The images and references are stored in an array for later retrie ...

javascripthtmlcanvas

leafletjs: render Points of Interest (POIs) using canvas technology

I am looking for a way to efficiently draw multiple geo points using Leaflet and HTML5 canvas. My data source is geoJSON, but according to the documentation of Leaflet, drawing geo positions as canvas is currently not supported. var anotherGeojsonLayer = ...

javascriptcanvasgeojsonleaflet

Tips for creating a zoomable drawing

I have been working on this javascript and html code but need some assistance in making the rectangle zoomable using mousewheel. Could someone provide guidance? var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width ...

javascripthtmlcanvas

Struggle with registering fonts in Canvas using JavaScript

I've been struggling to add a custom font to my canvas for hosting the bot. Even though I'm not encountering any errors, the font fails to display on the host. Below is the code snippet: const { AttachmentBuilder } = require('discord.js'); const { SlashCom ...

javascriptnode.jscanvasdiscord.js

Using brush strokes to create a unique design on the canvas page

Currently, I am working on implementing a brush-like effect on a web page. The task involves providing multiple patterns/textures in the background and allowing users to drag their mouse to create the pattern effect on the page. If you want to see the st ...

javascriptjqueryhtmlcanvashtml5-canvas

The existence of useRef.current is conditional upon its scope, and it may be null in certain

I'm currently working on drawing an image on a canvas using React and Fabric.js. Check out the demo here. In the provided demo, when you click the "Draw image" button, you may notice that the image is not immediately drawn on the canvas as expected. http ...

javascriptreactjstypescriptcanvasfabricjs

What is the process for adding a download link to my canvas once I have updated the image?

Is it possible to create a download link for an image that rotates when clicked, and then allows the user to download the updated image? Any help would be appreciated.////////////////////////////////////////////////////////////////////// <!DOCTYPE ht ...

javascriptjqueryhtmlcsscanvas

javascriptDiscover the location of the central point within a polygon

I have stumbled upon a helpful resource that explains how to discover the central point of a polygon (and here in JavaScript): If you want to see a real-life example, check out this jsfiddle demo. Let's work with this specific polygon: var polygon = [ ...

javascriptprototypecanvas

FadeOut Television static on Canvas after a period of inactivity

Is there a way to smoothly fade out the TV noise after a specific timeout period? I found this code snippet on Stack Overflow that seems to address a similar issue: var canvas = document.getElementById('canvas'), ctx = canvas.getContext( ...

javascripthtmlcanvas

Adding a semi-transparent layer to cover half of the canvas while still allowing the canvas to be visible

I'm struggling with overlaying a div on top of a canvas while keeping the canvas visible. Currently, I can only get the div to cover the canvas and hide it. If anyone has an example to share, that would be greatly appreciated. var canvas = document.quer ...

csshtmlcanvashtml5-canvas

Drawing intersecting lines on a javascript canvas and clearing them using the lineto method

I am working with a canvas where lines are drawn based on mouse movement. I am trying to achieve the effect of the line only lasting for a few seconds before disappearing, similar to swirling a ribbon with a set length. I have been using lineTo to draw the ...

javascripthtmlcanvashtml5-canvas

Display markers on the canvas

I am having trouble painting points from a JSON object on canvas using the following code. Can someone help me identify where I went wrong? var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var t = [{"prevX":39,"prevY":58,"currX ...

javascriptcanvas

Removing the gap between the clicked point and the draw point in Html5 canvas

To better understand my issue, please refer to the image linked below: In the image, you can see that when I scroll down and click on the canvas to point a position, it creates space between the clicked point and where the line is drawn. Below is the cod ...

javascriptjqueryhtmlcanvas

Tips for properly panning across the canvas

I added event listeners to capture mouse movement, clicks, and releases in my code. canvas.addEventListener('mousemove', onMouseMove, false); canvas.addEventListener('mousedown', onMouseDown,false); canvas.addEventListener('mouseup', onMouseUp, false); T ...

javascriptcanvas

Drawing a personalized cursor using JavaScript on a canvas

I've been working on creating a canvas that allows for drawing in vanilla JavaScript. Although I've successfully enabled drawing on the canvas, I'm now looking to implement a feature where a preview dot shows up when the user presses down before actually d ...

javascripthtmlcanvashtml5-canvas

Using JavaScript, you can manipulate the position of a line on a canvas to

I want to create a feature where users can manipulate lines on a canvas by skewing them. This means they would be able to drag one end point of the line to a desired point on the same x-axis using JavaScript and HTML5 canvas. Can someone please provide g ...

javascripthtmlcanvas

Unable to render a rectangle with React's canvas context.fillRect

Could anyone help me with drawing a rectangle using React? I'm having trouble getting it to work. I'm confused as to why the code below isn't showing a rectangle on the screen. class DrawingView{ constructor(props) { this.canva ...

javascriptreactjscanvashtml5-canvasjsx

Adjust Fabric js Canvas Size to Fill Entire Screen

Currently, I am working with version 4.3.1 of the Fabric js library and my goal is to adjust the canvas area to fit its parent div #contCanvasLogo. I have tried multiple approaches without success as the canvas continues to resize on its own. Below is the ...

javascriptjquerycsscanvasfabricjs

Error: Unable to access the 'width' property of an undefined value - Nuxt JS and Canvas

I am new to using Vue JS and trying to run a sketch on the canvas element in Nuxt JS, but encountering some issues. While there are no errors in VS Code, there is an error showing up in the browser console: client.js?06a0:84 TypeError: Cannot read propert ...

vue.jscanvasnuxt.js

Error: Kinetic.js cannot upload image to canvas

There must be something simple that I'm missing here. I've checked my code line by line, but for some reason, the image just won't load. var displayImage = function(){ var stage = new Kinetic.Stage("imgarea", 250, 256); var layer = new Kinetic.Layer( ...

javascriptcanvaskineticjs

Looking to adjust the fill pattern dynamically

I previously implemented this code: Is there a way to modify the fill image on my 3 buttons to display in 3 distinct colors instead? ...

javascripthtmlcanvasfill

What are the steps to clipping a canvas using CSS clip-path?

When it comes to clipping a canvas, there are multiple methods that can be used. One way is to create a path with getContext('2d') and set globalCompositeOperation. Another method involves using -webkit-clip-path or clip-path, though the latter may not alw ...

javascriptcsshtmlcanvaswebkit

Unable to render canvas element

Hey guys, I'm trying to display a red ball on the frame using this function but it's not working. I watched a tutorial and followed the steps exactly, but I can't seem to figure out what's wrong. Can someone please help me with this? I really need to und ...

javascripthtmlcanvas

Changing the background color of the canvas using Javascript

I want to create a rect on a canvas with a slightly transparent background, but I don't want the drawn rect to have any background. Here is an example of what I'm looking for: https://i.stack.imgur.com/axtcE.png The code I am using is as follo ...

javascripthtmlcsscanvas

Issues with clearRect() function in HTML5 canvas

Recently, I developed a function with the goal of redrawing a square line block that covers the entire page whenever the window size is adjusted. For reference, you can view my code at http://jsfiddle.net/9hVnZ/ However, I encountered an issue: bgCtx.cl ...

javascripthtmlcanvas

Is there a way to transmit a div using Node.js?

Scenario: I am developing a web application that allows users to draw on a canvas, save the drawing as an image, and share it with others using Node.js. Current Progress: Drawing functionality (real-time updates on both clients). Saving the canvas as a ...

javascripthtmlnode.jscanvas

What are the reasons for being unable to access the HTML canvas in Vue?

I am currently working on creating a canvas element in Vue, but I seem to be encountering issues with the canvas instance. It appears that I may not be declaring or utilizing it correctly, as I am receiving the following error: TypeError: Cannot set pro ...

vue.jscanvas

JavaScript code to retrieve an image from an <img> tag's source URL that only allows a single request and is tainted due to cross-origin restrictions

I have an image displayed in the HTML DOM. https://i.stack.imgur.com/oRgvF.png This particular image (the one with a green border) is contained within an img tag and has a URL as its source. I attempted to fetch this image using the fetch method, but enc ...

javascriptpythonhtmlseleniumcanvas

Utilizing ionic-scroll for seamless movement and scrolling of a canvas element

I have set up a canvas element with a large image and I want to enable dragging using ionic-scroll. Following the provided example: <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; h ...

javascripthtmlcanvasionic-framework

Utilizing Angular 2 for dynamic CSS binding: manipulating style.width and style.height properties

I am experiencing some unusual rendering issues when using plain HTML5 canvas and CSS binding with A2. Can anyone please explain the difference between the following code snippets: <canvas height="400" width="1200" #background> </canvas> AND ...

csshtmlangularcanvashtml5-canvas

The timing of the RequestAnimationFrame function varies based on the dimensions of my canvas

In my application, I have a canvas that dynamically adjusts its CSS size based on the window size. The main gameplay loop in my code looks like this: run = function(){ console.log(timerDiff(frameTime)); game.inputManage(); game.logics(); ...

javascripthtmlcanvasrequestanimationframe

Tips for using Selenium and Javascript executor to search through the Canvas system?

Is it possible to automate interaction with a 'graph' created on a canvas? I need to be able to click on elements, drag them, and perform other actions like getting text. Can this be achieved with automation using Selenium and JavaScript executor? Any he ...

javascriptselenium-webdrivercanvasautomationprotractor

"Is it possible to move the text on the canvas by dragging it to where you want it to be

Seeking help again after an unsuccessful attempt. How can I allow the user to add text to the canvas by dragging it to their desired location? For example, if they input text somewhere, it should appear on the canvas and then be draggable to any position ...

javascripthtmlcanvas

BlendModeGlobal operations

Experimenting with the globalCompositeOperation property in a loop by passing different strings (source-atop, source-over, etc.) to the same 2D context, I observed that Firefox only allowed me to draw a few shapes while Opera only displayed the last one. ...

javascripthtmlcanvas

Issues with displaying images in CSS when using HTML 5 canvas drawing

In attempting to draw an image on a canvas using a pre-loaded image and CSS, such as: img.style.backgroundColor="red"; ctx.drawImage(img,0,0,100,100); I have observed that the image is drawn without incorporating the CSS modifications. Are HTML canvases ...

javascriptcsshtmlcanvastransparency

"Seamlessly Integrating AngularJS with WebGL for Stunning Canvas Inter

I am new to AngularJS and curious about its compatibility with HTML5 Canvas or WebGL. Are there any tutorials available on how to integrate AngularJS into a view that uses these technologies? I have noticed some games claiming to be developed with Angular ...

javascriptmodel-view-controllercanvasangularjswebgl

Canvas 'toDataURL' Execution Error Occurs with Angular Dynamic Routing

For my Web application, I am using AngularJS on top of Node/Express. One of the routes in my application has an HTML5 canvas which I convert to an image. When I navigate to that route directly with this code, there are no problems with converting the canva ...

angularjsnode.jscanvas

Creating dynamic canvas elements with images using HTML and JavaScript

Currently, I am working on a unique project involving a canvas filled with dynamic moving balls. This project is an extension or inspired by the codepen project located at: https://codepen.io/zetyler/pen/LergVR. The basic concept of this project remains t ...

javascripthtmlcsscanvas

What is the best way to update a canvas chart when the side menu is hidden?

I am facing an issue with the layout of my webpage, which includes a left side menu and a canvas chart. The left side menu occupies the first 155 pixels of the width, leaving the rest for the canvas chart set to a width of 100%. However, when I close the ...

javascripthtmlcanvas

"Displaying the y-axis in d3.js: A Step-by-Step

I am a beginner in d3.js and I'm having trouble with my y-axis not showing up in the browser. Can someone please help me find a solution? var barOffset=5; var barWidth=50; var width=700,height=700; function processData(data,key){ var objects=[]; ...

javascriptjquerycanvassvgd3.js

Save a PNG file using the HTML5 Canvas when the Submit button is clicked, with the help of PHP

I am looking for assistance with a signature capture form. I came across a standard template on Github that works perfectly, but I wanted to customize it further. However, my Javascript skills are still in the early stages. The current code allows you to c ...

javascriptphphtmlcanvas

What is the best way to upload a canvas image from a GUI to the back-end using an AJAX call and setting the content-type as "image/jpeg"?

What is the best method for saving a canvas image from GUI to back-end using an AJAX call that accepts content type "image/jpeg" and avoids the error "jquery.js: 8453 Uncaught TypeError: Illegal invocation?" HTML <canvas id="myImage"></canvas> ...

javascriptjqueryhtmlajaxcanvas