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

learn more… | top users | synonyms

2
votes
0answers
59 views

HTML5 Parallax Scrolling utility using canvas

I have created a utility to create scrolling parallax backgrounds. ...
3
votes
1answer
109 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
85 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
14 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
102 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
36 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 ...
5
votes
1answer
93 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, ...
7
votes
2answers
101 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 ...
2
votes
1answer
49 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 ...
4
votes
1answer
37 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
57 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
108 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, ...
6
votes
2answers
132 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
75 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
96 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 ...
6
votes
1answer
121 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
27 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 ...
3
votes
1answer
39 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 ...
15
votes
5answers
2k 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
111 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
169 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
338 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
201 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 ...
11
votes
1answer
181 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
86 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
102 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
76 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
152 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
138 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
138 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
140 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
562 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
49 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
128 views

Single Digit Math Quiz

I decided to write a very simple web-game: ...
-2
votes
1answer
224 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
276 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
775 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
336 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
256 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 ...
10
votes
1answer
471 views

JavaScript “snow” animation

I have worked for a few hours and this is the result: ...
3
votes
1answer
153 views

Canvas color detection

I am coding a game, and I need to detect the color of a rectangles on a canvas, by moving a character and touching them, so that a message will be displayed "this is magenta" and so on. Please find ...
1
vote
1answer
194 views

Simple use of mouse clicks to position a ball

Here's a simple program I wrote to teach myself the basics of using a mouse for a potential HTML5/JavaScript game. The thing that tripped me up was event.clientX ...
2
votes
1answer
33 views

Two sprite-drawing functions for Amara game

Ideally I would have one draw method in the parent class (Player). But I can't figure out how to do this. I don't know if there is anyway to decouple it totally. I ...
2
votes
0answers
89 views

Canvas/JS banner with Flash

Here is my first Canvas/JS banner. I just got a flash one and hand-coded it from the beginning to the end. I have several major concerns/questions: I have seen several banners made in Adobe Flash, ...
4
votes
1answer
695 views

Drawing a color wheel… faster?

Using the following code, I am able to neatly draw a color wheel, however, performance is barely acceptable on a high end machine. Now, I know some tricks I could employ to make it run far more ...
3
votes
1answer
224 views

Traversing a tile-based 2D-array map using keyboard controls

I've produced the beginnings of an RPG-style game using HTML5 and canvas. So far you can use the keyboard controls WASD to move an avatar around a simple tile-based map. The map is constructed of ...
4
votes
1answer
317 views

Fast draw wxPython OnPaint

I have the following wx.Window: ...
1
vote
1answer
320 views

Is context.clearRect() necessary?

My application is a bit slow. I believe this is because .clearRect is one of the more intensive events in my application so far. However I also draw an image on top ...
6
votes
1answer
79 views

Tracking (uniform spacing) between 2D elements

The problem I am solving: I select multiple 2D SVG elements in an editor(the elements are in arbitrary positions on my canvas). I run the function calcMultiTrack()...
1
vote
1answer
43 views

Grey to Colored Image

I want to improve the code, in which you can enter a grey bitmap and it will return you a colored one. ...