Skip to main content
25 votes

Drawing a grid on canvas

You're rendering the same line too many times. To create the grid you need to draw (w/stepSize) vertical lines and (h/stepSize) horizontal lines. Total: (w+h)/stepSize lines You used two nested ...
Deian's user avatar
  • 504
10 votes

Display Thousands/Millions of different background images

Sluggishness Memory limits Take a look at a random folder of images on your computer, and observe it's size. Thousands of images will amount to gigabytes of space, which means all that needs to be ...
Sumurai8's user avatar
  • 2,595
10 votes
Accepted

Improving particle performance in P5.js

Performance The main reason for the slow down are the state changes you incur each time you change the color and transparency of the particle (which is each particle). Unless you are prepared to ...
Blindman67's user avatar
  • 22.2k
8 votes
Accepted

Table tennis exercise builder

This turned out to be a bit lengthy. I am not sure if I covered everything, but this should help you with cleaning up your code. JSLint Strings In Javascript strings can be surrounded by both ...
Sumurai8's user avatar
  • 2,595
8 votes

Display Thousands/Millions of different background images

Why do you need to display thousands/millions images? Without knowing that, it's hard to propose a good solution. Perhaps you could just generate that large background once on server side and serve ...
Rene Saarsoo's user avatar
  • 2,062
8 votes
Accepted

Snake on a Plane

Code review I like the name "Snake on a plane" and was hoping to see some wings and the like. Maybe that's to come. Not bad if this is your first game. I have gone over it from top to bottom and ...
Blindman67's user avatar
  • 22.2k
7 votes
Accepted

Pixel manipulation performance

Use diagonals. The idea is to have only one pixel check, compared to two you have now: find the first occupied pixel on a diagonal skip to an unoccupied one fill with 0.1 while unoccupied repeat 1-3 ...
woxxom's user avatar
  • 1,952
7 votes
Accepted

Make two random enemies shoot projectiles every second

Games Performance Writing games using JavaScript presents some unique problems. Jank and slowdown due to memory management. Though there have been vast improvements to what was the norm just a few ...
Blindman67's user avatar
  • 22.2k
5 votes
Accepted

Python Tkinter game, "Bubble, Blaster"

Don't use a wildcard import Wildcard imports are discouraged by PEP8. Instead, I recommend doing imports like this: import tkinter as tk You will then have to ...
Bryan Oakley's user avatar
  • 2,089
5 votes
Accepted

On right click draw triangle to the canvas

General problems It is better to add events via addEventListener rather than in the HTML, this keeps the source code together making it easier to maintain. It also ...
Blindman67's user avatar
  • 22.2k
5 votes

My re-written snake game in Javascript

Potential Bug: the score doesn't appear to reset - should it go back to 0 when the button labeled Start is clicked?? ...
Sᴀᴍ Onᴇᴌᴀ's user avatar
5 votes
Accepted

d3.js canvas performance

Before anything else, the tutorial you're referencing is this: https://www.freecodecamp.org/news/d3-and-canvas-in-3-steps-8505c8b27444/ By reading the tutorial you'll see that the elements we'll ...
Gerardo Furtado's user avatar
5 votes
Accepted

Draw triangles on the HTML canvas optimization

2D canvas performance You are running on a VERY slow system. Make sure you are not running any extension when measuring performance. Avoid GPU state changes The biggest performance penalty when using ...
Blindman67's user avatar
  • 22.2k
4 votes

Optimizing rendering with a lot of transformations and save/restore

I see this was the second javascript question you posted here and it is unfortunate that there have been no responses in the nearly four years since then. Perhaps you have learned a few things about ...
Sᴀᴍ Onᴇᴌᴀ's user avatar
4 votes

Space Invaders-like game in JavaScript

...
Joseph's user avatar
  • 25.1k
4 votes
Accepted

Two player snake game

I first played a few rounds of the game and I immediately liked it. The screen motion is smooth, the colors have a nice contrast, and I liked that it is even possible to play snake in single-player ...
Roland Illig's user avatar
  • 21.3k
4 votes

Mandelbrot Set generator

What is Slow? It is hard to know what people mean by slow. Your expectation may be comparable to a good C multi threaded Mandelbrot viewer zooming at 60fps, and slow means your code is more like 30-...
Blindman67's user avatar
  • 22.2k
4 votes

Make two random enemies shoot projectiles every second

Your second code looks better on the surface, but it has a couple problems: Random sort bias .sort(() => 0.5 - Math.random()) is biased - elements that occur ...
CertainPerformance's user avatar
4 votes
Accepted

Python - Tkinter - Infinite Canvas World for drawing apps

The code looks good and performance wise it is also pretty good, could handle about 1000 objects with relatively ease (of course depends on hardware and complexity of objects). Some suggestions for ...
Patrik Gustavsson's user avatar
3 votes
Accepted

JavaScript metaballs optimization

Performance optimizations: Retrieving and updating the canvas's imageData each frame is costly. It is far more efficient to precompute the individual balls on "...
le_m's user avatar
  • 1,925
3 votes

JavaScript metaballs optimization

JavaScript metaballs optimization I read that as "JavaScript meatballs optimization" :D First optimization I would do is... code organization. Slow-looking code will be slow code, since it takes you ...
Joseph's user avatar
  • 25.1k
3 votes

Sunset animation in a canvas

Just some random tips in no particular order. Consistency in naming: keep using camelCase. (drawsun -> drawSun, ...
Tweakimp's user avatar
  • 769
3 votes

Drawing a grid on canvas

Fun question, the bounty should obviously go to deain. Nobody seemed to have noticed the fact that x and y are globals. Other ...
konijn's user avatar
  • 33.2k
3 votes
Accepted

Particle text directive

There's a few files so I'll focus on a more general code review. Overall it looks good! The code is well structured, readable and your logic is easy to follow. ES6+ You're already using newer ...
Craig Ayre's user avatar
3 votes
Accepted

Game of life - JavaScript

I have gone over the code briefly and looked at a couple optimizations, but haven't come up with any drastic changes. I will try to go over it again when I find time. What is good I like how the ...
Sᴀᴍ Onᴇᴌᴀ's user avatar
3 votes

Plotting points representing many events on a canvas

Optimising for performance. Javascript has a way encouraging people to write code that is terribly inefficient. You are lucky the problem is one that can get a lot of benefit from just some minor ...
Blindman67's user avatar
  • 22.2k
3 votes

Implement a Tetris game in JavaScript using HTML5 Canvas

Decoupled presentation The function animate is synced to the display, but you are not rendering any content from that function. You are rendering from the timeout ...
Blindman67's user avatar
  • 22.2k
3 votes

My re-written snake game in Javascript

Quick review turned into a snake game Some important points missed by the other answers Always use requestAnimationFrame to render any animation. Keyboard ...
Blindman67's user avatar
  • 22.2k
3 votes

Two player snake game

General Feedback This code looks quite decent. Most of the functions and methods aren’t excessively long. Some lines are terminated with a semi-colon but others aren’t. It is best to be consistent. ...
Sᴀᴍ Onᴇᴌᴀ's user avatar
3 votes
Accepted

Sierpinski’s Gasket Triangle in JavaScript

Performance For positive numbers < 2 ^ 31 use num | 0 (bitwise or zero) to floor You are drawing an arc that is 1 pixel in radius, with the stroke width of 1 ...
Blindman67's user avatar
  • 22.2k

Only top scored, non community-wiki answers of a minimum length are eligible