Hot answers tagged

29 votes

Drawing a grid on canvas

Try using a SVG object on the canvas: ...
Quill's user avatar
  • 11.9k
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
20 votes
Accepted

Drawing a grid on canvas

Quill already did a good job speeding up your code, so I'll focus on the code you have right now. Give me the object! (Not how to get it) Your drawGrid function ...
SirPython's user avatar
  • 13.3k
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
  • 21.6k
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
  • 21.6k
7 votes

Drawing a grid on canvas

You are running three statements repeatly for no reason. Try this: ...
Will's user avatar
  • 179
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
  • 21.6k
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
  • 21.6k
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
  • 21.6k
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
Accepted

Traffic light sequence

Ah, you moved your <h1> into the <body>. Still, what exactly are you looking for? File size (--> code reduction)? ...
Ivan Modric's user avatar
4 votes

Space Invaders-like game in JavaScript

...
Joseph's user avatar
  • 25k
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
  • 21.6k
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

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.1k
3 votes
Accepted

JavaScript Breakout Game

First, I wouldn't worry about the polyfill. Browsers that do support <canvas> also support requestAnimationFrame. ...
Joseph's user avatar
  • 25k
3 votes

Two sprite-drawing functions for Amara game

I stopped reading through the code when I got to this: ...
Malachi's user avatar
  • 28.6k
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
  • 25k
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

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
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

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