I don't understand what is happening here. I'm using HTML canvas to draw a rectangle and I'm moving the rectangle at 1fps. I'm noticing a 1 pixel trail at the top and bottom of the shape. Anyone have any idea what's happening here?

This moves the shape

// Move drop along x axis moveX(vel) { this.ctx.clearRect(this.x, this.y, this.w, this.h); this.x += this.vel; this.render(); }
This calls the moves shape function every second
setInterval(() => { console.log("????") const coords = randomCoords() const color = "green"; drop.moveX(10); // drop.moveY(10); }, 1000);
#webdevelopment #question #html5canvas

Built another HTML5 game: Neon Breakout.

Features: 3 power-ups (wide paddle, multi-ball, slow motion), combo multiplier, particle effects, Web Audio synth sounds. Single-file, no deps.

Play: https://moth-asa.github.io/breakout-game/
Source: https://github.com/moth-asa/breakout-game

#GameDev #JavaScript #HTML5Canvas #WebDev

Breakout

Canvas 2D rendering patterns with JavaScript
#JavaScript #CanvasAPI #HTML5Canvas #WebDevelopment #Frontend

https://codepen.io/art-eque/pen/KKEPKmL?editors=0010

From the amazing Franks laboratory

In case anyone was looking for the shittiest possible Canvas2D game engine, I have created "Merlin"!

As of yet there is no documentation, but it's architectural based on XNA. Enjoy! Internet points to whomever can tell me why it's named Merlin. ;)

https://github.com/Sidneys1/Merlin

#GameEngineDev #gameengine #HTML5Canvas #hotpotatolicense

GitHub - Sidneys1/Merlin: Merlin game engine for HTML5 Canvas2D.

Merlin game engine for HTML5 Canvas2D. Contribute to Sidneys1/Merlin development by creating an account on GitHub.

GitHub
Creating Dynamic Music Visualizations with Angular and the Web Audio API

Music visualization has always been a fascinating way to enhance the auditory experience, offering a visual representation of sound that can be both mesmerizing and informative. With the power of modern web technologies like Angular and the Web Audio API, creating dynamic music visualizations is more accessible than ever. This blog post will guide you through the process of building an engaging music visualization application using Angular and the Web Audio API.

RT Ksenia Kondrashova
Re @CodePen b/w series pt.2
(and today's #codepenchallenge)
Another quick sketch with repelling effect on canvas
Hosted on @CodePen
Demo & source code:
#html5canvas #creativecoding #JavaScript
https://codepen.io/ksenia-k/full/gOjJjzp

 https://twitter.com/uuuuuulala/status/1623373193892225024

Repelling Curve (canvas & pure JS, no dependencies)

...

CodePen

RT Ksenia Kondrashova
Snowflake drawing tool for winter season
Minimal HTML5 Canvas animation, no extra libs
Hosted on
@CodePen
#html5canvas #javascript #codepen
https://codepen.io/ksenia-k/pen/XWYOoYw

 https://twitter.com/uuuuuulala/status/1600512264343265288

Starfield Simulation in pure JavaScript und HTML5 Canvas

Diese Starfield #Simulation, die Sharad Choudhary in diesem Video-#Tutorial in einer guten Viertelstunde in #JavaScript und #HTML5Canvas ohne zusätzliche Frameworks oder Bibliotheken programmiert, ist nicht unbedingt neu, aber er zeigt sehr schön, wie ein minimales Grundgerüst für Animationen und Simulationen in pure JavaScript aussehen kann. http://blog.schockwellenreiter.de/2019/09/2019092502.html #CreativeCoding

Starfield Simulation in pure JavaScript – Schockwellenreiter

Physik-Simulationen in JavaScript und HTML 5 Canvas

In diesem zweistündigen Video zeigt Euch Matt Keas, wie er in pure #JavaScript (#ES6) und #HTML5Canvas flüssig und in 60 Bildern pro Sekunde laufende Physik-#Simulationen (in der Regel Partikel-Systeme) erzeugt. Das Video ist stellenweise ein wenig langatmig (hier hilft der schnelle Vorwärtslauf), aber die Beispiele sind ungeheuer inspirierend. http://blog.schockwellenreiter.de/2019/09/2019092403.html

Physik-Simulationen in JavaScript und HTML 5 Canvas – Schockwellenreiter

Alles, was Ihr über Schwerkraft wissen wolltet …

und wie man sie in pure #JavaScript und dem #HTML5Canvas implementiert, erklärt Euch Christopher Lis in diesem, etwa halbstündigen #VideoTutorial. Den kompletten Quellcode findet Ihr in seinem GitHub-Repositorium. http://blog.schockwellenreiter.de/2019/09/2019091801.html #CreativeCoding

Alles, was Ihr über Schwerkraft wissen wolltet … – Schockwellenreiter