Canvas is a drawing element introduced to web development with HTML5.
3
votes
0answers
24 views
Optimizing rendering with a lot of transformations and save/restore
I have implemented a renderer for shapes described with a L-System grammar. Implementation of that is not important. Basically you feed it an angle and some rules, and it spits out a string of ...
1
vote
0answers
56 views
JavaScript HTML Canvas
I've got 3 HTML <canvas> elements, which are populated using JavaScript.
Below is the JavaScript for each canvas element. I have also attached gifs of what ...
1
vote
0answers
30 views
Clear and redraw the whole Canvas
This is a simple circular progress with Canvas. Is there any way to make it shorter and easier to read? Another concept for a better performance? I guess clear and re-draw the whole canvas in every ...
1
vote
0answers
20 views
More JS AI causes slower AI movement in HTML Canvas
I have a simple little game with one character as the player and four enemy characters. I created a very basic AI, that moves towards the player when the player is nearby. That all worked fine, but ...
2
votes
0answers
131 views
React Image component that loads and blurs an image onto a canvas
My react.js Image component will load an image from a URL or base64 string, do some processing on it and put it on a canvas. The "preload" prop is a 10x10 pixel image that is blurred just a little bit ...
3
votes
0answers
47 views
Simulation of reflected particles
I made a particle simulation in vanilla JavaScript. It can currently handle around 10000 particles (staying 58-60 fps on my machine).
For testing, controls are MB1, MB2, R, Z.
How can I make this ...
9
votes
1answer
140 views
Table tennis exercise builder
I am trying to create a builder for table tennis exercises. User Blindman67 helped me here. Now I'm trying to clean up the code before continuing to work on it.
Please tell me how to clean up the ...
2
votes
1answer
50 views
Panning JS canvas
I'm experimenting in canvas and trying to create pan effect. I've managed to pan succesfully, but I'm curious if I'm doing it correctly. Since I've come up with the following code myself, I don't know ...
3
votes
2answers
107 views
Pixel manipulation performance
I have created a function that adds "shadow" to the content of a canvas. The algorithm for adding shadow follows these rules:
If the either x or ...
2
votes
0answers
50 views
Drawing app with JS / canvas
Created this drawing app with JS / canvas. JSHint is throwing errors but the app works just fine. Need help with code clean up / refactoring as I'm fairly new to JavaScript.
JSHint in Atom is fine ...
2
votes
0answers
95 views
HTML5 Parallax Scrolling utility using canvas
I have created a utility to create scrolling parallax backgrounds.
...
3
votes
1answer
162 views
HTML5 Snake Game
This is the first version of my first HTML5 game. Beyond the standard features, I've added a high scores board which uses local storage to keep track of the scores.
You can move the snake with the ...
5
votes
0answers
150 views
SVG mosaic creator
Although my code works as expected, there are a few gotchas.
A single row is not filled at once; instead, I can see partially filled rows during the rendering process(Fixed in the updated code below.)...
1
vote
1answer
58 views
Network graph canvas display using Tkinter
I made a little application (for windows, but easily compatible with linux by just changing some lines) for displaying a little network graph using Tkinter and Python. I basically draw lines higher ...
3
votes
0answers
135 views
HTML5 canvas Snake game
My most recent project is this simple Snake game, and I would like to know what you think of it and if you have any suggestions.
...
3
votes
0answers
53 views
Tiny Image Editor
I made a small(ish) image editor for a client that is supposed to be able to do the following:
initially scale image to preset size to avoid tiny/huge images
initially center image in canvas
resize ...
6
votes
1answer
177 views
Simple color flooding game in Javascript/HTML5 canvas area
I'm learining JS. I have prepared a simple color flooding game, like Pixelated.
The engine below works, though scoring is not implemented. Please help me find out how this code could be made better, ...
10
votes
2answers
142 views
“Stardust” 2D Gravity Simulator - Follow Up 1: The Planets
This is a follow up for the 2D Gravity Simulator-like Game question.
Since then I have developed my javascript skills further, and now I'm using ES6 mainly. Note that even through this code uses the ...
2
votes
1answer
69 views
Linkedlist visualization using html5 canvas
I have written a simple linked list visualization program in JavaScript:
I am just a beginner in html5 canvas. I am pretty much satisfied with how it works, but I´d like to know if I made some things,...
4
votes
1answer
54 views
A Bouncing Ball Canvas Program
I've just completed reading the game tutorial of w3schools and wrote a piece of code from scratch.
This program basically creates a canvas element with a ball bouncing off the walls of the canvas. ...
4
votes
1answer
62 views
JavaScript Pong clone - classroom use
I'm creating a Pong clone for use in teaching JavaScript to beginners. Unfortunately, I am largely a JS beginner myself, so I probably missed something in the below code; however, I do not want to ...
8
votes
1answer
138 views
JavaScript canvas sphere
I made a small demo in JavaScript using HTML5 canvas, which renders a rotating sphere. The sphere is generated by first creating a set amount of points (currently 50, represented by vectors) randomly, ...
3
votes
2answers
2k views
Traffic light sequence
I have create a functioning automated traffic light sequence using an array and if statements. It all work correctly but I am wondering if there is anything more I ...
6
votes
2answers
255 views
Snake game using a canvas
I'm trying to reach good understanding of how to build scalable modular application structure. Recently I've been practicing with canvas and rewriting one of the popular snake game realizations. I've ...
5
votes
0answers
92 views
Demo for playing around with HTML canvas
I'm a beginner in JavaScript and I want to improve my skills. I decided to write a simple application that adds a GUI to CanvasRenderingContext2D. I have just ...
1
vote
0answers
300 views
A simple drag and draw HTML5 canvas
I've written a quick directive that provides two features:
Clicking on an empty area of the canvas will allow a 'drag and draw' function
Clicking on a an existing rectangle on the canvas will allow a ...
6
votes
1answer
170 views
JavaScript Breakout Game
I'm a novice programmer who is very new to JavaScript, and animation/graphics, and I have this breakout game on my flask website.
I tried to do as much as I could from scratch, and I'm unsure if my ...
2
votes
1answer
40 views
Pass canvas content from client to admin using web socket
The application's aim is to transfer drawings from the client canvas to the admin canvas using web sockets, as smoothly as possible. At every mousemove event, the client canvas is compressed to .png ...
4
votes
1answer
59 views
Improving canvas performance for a color average animation
I'm trying to create a canvas project inspired by this gif where colors of an image are averaged and animated.
Thus far I have all of the functionality working but it only performs well with a large ...
16
votes
5answers
3k views
Drawing a grid on canvas
I have created canvas (800x400) - and filled it with a grid. It works but the rendering of the grid (lines) takes around 3 seconds, which seems excessively long. Am I doing something wrong?
...
5
votes
1answer
138 views
canvas snake game
i made a simple js snake game with canvas, the code is all mine so it can have some drawbacks or not so good parts. I will be glad to hear some opinions.
https://github.com/vitaliyterziev/snake
<...
1
vote
1answer
481 views
Drawing thousands of lines in WebGL or Canvas
I am trying to draw thousands of lines between nodes, and the line positions are constantly changing (i.e. consider a node being dragged while connected to thousands of children by these lines).
...
3
votes
1answer
584 views
WPF canvas drawing very slow
I am building a map editor to easily create 2d levels. To visualize how my level looks like I am using a canvas. On this canvas I can select which block is filled with a certain type ( like solid ). I ...
4
votes
0answers
350 views
Canvas animation of network nodes and edges
Having to give the idea of an ever changing network of nodes (each with different impact and possibly more than one color) connecting each other to create something.
I wanted to give it depth ...
12
votes
1answer
212 views
2D Gravity Simulator-like game
This project is pretty much like a 2D gravity simulator. You click and it creates a circle that attracts other circles. The result of a collision is a bigger circle that is a sum of the masses. If you ...
4
votes
1answer
106 views
JavaScript Canvas Animation
This animation makes my fans spin up after several seconds, and it seems to have a sub-par framerate. I am trying to understand why, and optimize its performance.
Codepen
The animation function (...
4
votes
1answer
141 views
Xonix game in JavaScript/Canvas: detection of conquered regions
I've written a Xonix clone in Javascript/Canvas. It seems to work fine. However I would like to refactor the code of detecting conquered regions which seems to be bulky (see methods ...
7
votes
1answer
88 views
Animating a 2D particle “web”
I have written a small class to generate and animate one of those trendy particle webs. I plan to use this as the main background of my personal website, so naturally I'm concerned about the ...
4
votes
2answers
210 views
HTML5 Canvas game starts to lag 10 seconds after loading page
I got bored and started making a game using HTML5, CSS3, and JavaScript/jQuery. I've been working on it for about 2 weeks and it was running pretty well.
Today I opened it and was moving the player'...
7
votes
1answer
157 views
Image manipulation using HTML5 Canvas
I have recently started researching some computer vision, and in the process of discovering some interesting things I have been compiling some functions that allow me to manipulate images at a low ...
5
votes
1answer
165 views
Class(es) for animating objects on a canvas
I'm building a simple canvas animation engine as an exercise in learning ES6. Coming from C++ and Java, I miss static properties, but I've read that "Prototypes having data properties is generally ...
5
votes
1answer
158 views
Javascript Canvas Game Engine
I am creating a simple 2D canvas game engine in JavaScript. Are there any optimizations that I could make, or obvious issues (performance, semantics or otherwise) that you can see?
JS Bin here
...
8
votes
1answer
731 views
Tic-Tac-Toe game with HTML5 canvas
I know it is a simple game, but what I am doing here is practice what I took in an AI course. I'm also playing a little with the canvas and trying to improve the readability of my code and using ...
2
votes
0answers
51 views
HTML5 canvas drawing from video source
I have the following code, which draws a overlay image onto video for each frame:
...
8
votes
3answers
143 views
-2
votes
1answer
363 views
Drawing with canvas in python
Is there a function or some easier way to draw this, each of this little circles should have 8 other smaller circles around them like the big circle... So far i made big circle in center with 8 ...
6
votes
3answers
379 views
Rotating 3D wireframe
This code consumes a lot of CPU. Could you tell me where it is possible to improve the code or change the way rendering?
Or it is possible to reduce the overhead of calculations? If you are using ...
17
votes
1answer
1k views
Asteroids game clone
I have recently been teaching a JavaScript module on a games programming undergraduate course and I made this game as a learning exercise and as an example for my students to study. I have made games ...
11
votes
1answer
378 views
Recursive dragon on a canvas
I've been doing some JavaScript for fun again. This time I tried my hand at drawing the Dragon curve - a neat fractal that consists of one line traveling across the plane, never crossing itself, and ...
4
votes
1answer
315 views
Flying-balls on a canvas element
I have made this little program for fun, to add on my personal webpage. I remember seeing something like it some time ago, don't remember exactly where, and I tried to reproduce it myself.
As it ...
