Last call to make your voice heard! Our 2022 Developer Survey closes in less than a week. Take survey.

Questions tagged [canvas]

Canvas is a drawing element introduced to web development with HTML5.

Filter by
Sorted by
Tagged with
1 vote
1 answer
52 views

How to optimize loops drawing canvas pattern?

I have the following function that draws a canvas pattern. It works so slow when canvas size bigger then 512x512. ...
user avatar
  • 19
0 votes
2 answers
97 views

Animate circle using Javascript and HTML5 Canvas

Animate circle using Javascript and HTML5 Canvas. The circle will be drawn at the center of the canvas. The initial radius will be 0 and will keep on increasing till 100 and then decrease till 0 and ...
user avatar
2 votes
1 answer
60 views

Draw triangles on the HTML canvas optimization

There is a function that draws triangles on the canvas area in each lines: ...
user avatar
  • 123
2 votes
1 answer
53 views

Generate Multiple Instances of Canvas-based UI Object

Background I'm interested in implementing a small script to display multiple independent instances of a Canvas-based control on one page. The ultimate intention is to add many similar controls to the ...
user avatar
  • 123
1 vote
1 answer
38 views

Draw shapes using the Html5 Canvas api

A while ago I decided to start working on a project that will keep me busy for a while and will help me sharpen my programming skills. I do not underestimate the work behind apps like adobe xd, sketch....
user avatar
2 votes
1 answer
93 views

Javascript speed of an animated object (planet orbiting sun)

So I am pretty new to JavaScript and I thought I might make an animation demonstrating a planet orbiting a sun in an elliptical orbit using Kepler's laws. I am struggling to get the speed right. So I ...
user avatar
  • 23
5 votes
1 answer
63 views

Breaking a line segment into two where it encounters a rectangle

I have developed a function that takes a list of line segments and a rectangle that breaks the line segment into two where it encounters the rectangle. Here is a picture demonstration of what it does: ...
user avatar
3 votes
0 answers
37 views

HTML 5 Canvas Drawing app

I made a small simple drawing app using HTML5 Canvas, learning how to use canvas. You can right click to change color, scroll to change brush size, and click + drag to draw on the screen. Any feedback ...
user avatar
5 votes
2 answers
740 views

Make two random enemies shoot projectiles every second

Just finished my canvas game that is more or less replica of the old school arcade game "Space Invaders". The code below chooses two random enemies every second (approximately) from the ...
user avatar
1 vote
0 answers
105 views

Improving the code, events in individual functions (refactoring)

code It is necessary from this piece of code ...
user avatar
  • 11
9 votes
2 answers
233 views

Optimize a tile rendering algorithm for Swing Canvas

I have an algorithm that I use to render a text GUI using Swing's Canvas, it looks like this in practice: My goal is to reach 60 frames per second for a full HD ...
user avatar
1 vote
0 answers
27 views

Custom canvas star creator. With code to produce drawing

Simple star designer for HTML canvas. Allows you to change every variable about how to draw the star. This can be used to create squares, triangle, circles, hexagons, etc. But isn't an efficient way ...
user avatar
  • 193
3 votes
1 answer
572 views

JS + CANVAS Projectile Motion

Basically you've got a canvas, and you can click it to launch a ball in a certain angle and speed, everything is working fine, except for the arrow tip of the vector thing. I can't get it to draw ...
user avatar
11 votes
1 answer
256 views

Battle City (Tank) replica

I'm learning JS and Canvas. A friend of mine gave me the task to create a Battle City replica. I've already managed to make the map and the player to move. Nothing fancy just some squares with a color,...
user avatar
  • 181
3 votes
1 answer
92 views

Learning javascript by developing a simple game

I am learning javascript and have developed a car game using: HTML Canvas javascript The repository link is: https://github.com/lazycoder-007/car_race_html_javascript_game The code is given below: ...
user avatar
2 votes
0 answers
281 views

Canvas Drawing / Bucket Filing Kotlin

I have completed a solution for the below problem and uploaded it in Git Repo. I would be grateful if somebody can review in term of code quality, design and Kotlin language usage. Repo You're ...
user avatar
1 vote
0 answers
65 views

Moving square on a canvas

here's my code for moving a square on a canvas. Basicly I'm creating this thinking of some simple simulations or maybe a simple game. Would love some feedback how to optimize the code. ...
user avatar
  • 187
2 votes
0 answers
40 views

HTML game engine within angular

I currently have a very very basic js script that runs something 30 times per second. This is later to be used in a game engine. But now I'm not quite sure how I can best do that. This little script ...
user avatar
  • 283
6 votes
3 answers
744 views

Performance in particles.js library

Hey I'm trying to optimise particles.js library from Vincent Garrau in order to get 60fps @ 500 particles ~. I've already refactored the code to use a quad tree instead but it does not seem to be ...
user avatar
  • 163
3 votes
1 answer
869 views

Chess game in JavaScript

I have created a chess game in JavaScript. Right now you can only play against another human. ...
user avatar
2 votes
1 answer
676 views

d3.js canvas performance

I've just rewritten this code (a simple gravitational restricted n-body simulation) to display using canvas, rather than SVG. The reason being that I'd like to be able to run it with many thousands of ...
user avatar
  • 143
2 votes
1 answer
752 views

Plotting a parabola using Tkinter

I'm a beginner, and I have just written this basic code that simply plots a parabola in a graph. Is it possible to make my code more efficient? The process works by the creating lists of X and Y then ...
user avatar
4 votes
2 answers
1k views

Edge detection in a canvas

I have one function in my code to detect edges in a canvas but it's the slowest part of my code and is used everywhere. If I could just optimise this, my whole program would speed up considerably. ...
user avatar
  • 163
6 votes
2 answers
3k views

Improving particle performance in P5.js

I have modified a particle system to create an effect similar to the one that I want. However, with any substantial amount of particles it performs very slowly on my laptop (around 1.7 fps at the ...
user avatar
2 votes
1 answer
61 views

React component to animate planets on a canvas

I wrote some JavaScript to generate some graphics on a canvas, on a regular HTML page. I now want the same code to run in a component that is part of a React app. I've done this: ...
user avatar
  • 133
5 votes
1 answer
87 views

JS Simple game in canvas

I'm trying to learn javascript (especially the OOP part) and made this simple game. I'm looking for advice and ways to improve my code. Did I handle OOP well enough? What's the best way to create a ...
user avatar
  • 171
6 votes
1 answer
234 views

Tetris Game Javascript

I am creating Tetris in javascript. I have finished the basic mechanics. I would appreciate some feedback on how I could improve it. Down, left, and right arrow keys move the piece while the up arrow ...
user avatar
7 votes
1 answer
2k views

15 Puzzle Game JavaScript

I have created a program that lets you play the fifteen puzzle game. You have to get the blocks into ascending order by moving them into the one open space. I would like some feedback on the code and ...
user avatar
1 vote
1 answer
374 views

Upload image without src attribute

We gave an option for user to Upload the image Image is uploading fine, but its not adding any img src tag for that uploaded image.... Is this is acceptable to upload image without using any img tag ?...
user avatar
3 votes
1 answer
78 views

Monte Carlo pi animation

I have created a program that calculates pi using a Monte Carlo method. It also animates the process and displays the value as it is updated to show how it gets closer and closer to the actual value ...
user avatar
2 votes
1 answer
132 views

Mandelbrot Set generator

I want to reduce the big time it needed for my mandelbrot set generator to work. I'm working this for already a week. I tried to reduce the canvas size from 400 by 400 to 200 by 200 and the speed ...
user avatar
  • 173
3 votes
1 answer
47 views

Recamán Sequence Animation

I wrote a program that animates the Recamán sequence. It is in uses HTML canvas and JavaScript. I was hoping for some feedback on how it could be improved. ...
user avatar
3 votes
2 answers
2k views

JavaScript flood fill

I tried to implement a very simple color flood fill to experiment a bit with Javascript. All comments about the code are welcome but I am especially interested in performance as it seems to be a bit ...
user avatar
2 votes
0 answers
364 views

Simple jumping game: continue with jquery or switch to html5 canvas?

I'm coding for fun with the secret ambition of making a fun little game for mobile. So I started out building this little jumping game with Javascript and jQuery. The game relies heavy on css ...
user avatar
  • 129
4 votes
1 answer
226 views

Sierpinski’s Gasket Triangle in JavaScript

I wrote the Sierpinski’s Gasket Triangle in JavaScript, but I feel the code can be better, especially from L32 to L47. Could you make it more organized? ...
user avatar
8 votes
2 answers
652 views

Two player snake game

I created a 2 player Snake game from my original one player version. I am looking for some feedback on how I made it. I think I could use improvement when handling input (...
user avatar
1 vote
2 answers
155 views

Wireframe animation on canvas is slow

I'm recently working on a project that involves animation in the background. It works well on desktop but performance drops drastically on mobile. I'm using Paper.js to import a svg and animate it. ...
user avatar
4 votes
1 answer
118 views

JavaScript canvas Snake game

This is my 3rd JavaScript canvas game. It's basically just snake right now but I am planning on adding some more aspects to it soon. I was wondering if I could get some feedback especially on how I'm ...
user avatar
1 vote
2 answers
57 views

A function that generates arrays of video thumbnails using canvas

I have just finished my first version of a function that returns an array of video screenshots created with canvas. What I am looking for are ways to improve this speed by as much as possible. I want ...
user avatar
5 votes
1 answer
888 views

Rendering explosion of bouncing balls on a canvas

I'm making a particle engine that can spawn new explosions while keeping particles from previous ones active (until they despawn). The code works well on its own but within the game, two or more ...
user avatar
  • 269
0 votes
1 answer
763 views

Breaking up a simple Paint application into smaller classes

(Sorry this is a repeat post, I hadn't logged in on my initial question and am unable to respond) I currently have a working code for a simple paint application but it is all in one file and very ...
user avatar
  • 1
2 votes
2 answers
3k views

Javascript: Canvas drawing - storing mouse coordinates

I have a small JS application that allows a user, after clicking on a canvas, to draw a picture. Once the user clicks the mouse, the user is allowed to drag the mouse wherever they want within the ...
user avatar
  • 467
9 votes
1 answer
349 views

Sierpinski triangle html canvas Implementation

I wrote my Sierpinski Triangle fractal animation using HTML canvas with JavaScript: JsFiddle What do you think about it? How I can optimize it, if you see a need for that? Code: ...
user avatar
  • 315
6 votes
3 answers
1k views

My re-written snake game in Javascript

This a snake game I wrote about 1 month ago. It's working well. Looking for any suggestions for my code, I want my coding improved. jsfiddle link http://jsfiddle.net/geswhvdc/ ...
user avatar
  • 191
3 votes
0 answers
32 views

Loading NRRDs, images and names of parts and segments

I am creating a program to show NRRDs which are a format of medical images. In addition it loads a gallery of thumbnails, where each thumbnail has a link to change the selected NRRD. Plus there is a ...
user avatar
  • 657
11 votes
1 answer
272 views

Snake on a Plane

My code uses a canvas element to create a live snake game on a plane! ...
user avatar
2 votes
3 answers
726 views

Display Thousands/Millions of different background images

Kindly help me check this code, I want to be able to make it load thousands/millions of different pictures as HTML background without crashing or slowing down the browser. The images can be created ...
user avatar
6 votes
1 answer
97 views

Pong Game in JS

I am new to game development and took on the task to create a Pong replica due to my curiosity and interest in the field. I decided to write it in JavaScript because the game is not too labor ...
user avatar
0 votes
1 answer
406 views

Improving canvas pre-rendering [closed]

I define my canvas as you normally would, but I also include a bunch of different makeshift canvases: ...
user avatar
2 votes
0 answers
259 views

Inventory and stats for a game with Tkinter

It's an inventory UI and also displays the player's stats. I have been programming for a year or more and I want to improve my code. ...
user avatar