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

learn more… | top users | synonyms

4
votes
1answer
32 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. ...
2
votes
1answer
45 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
87 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
67 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 ...
4
votes
0answers
60 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
44 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
105 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
24 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
37 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 ...
9
votes
3answers
945 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
89 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
99 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
207 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
172 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
151 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
67 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
83 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
74 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 ...
3
votes
2answers
130 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 ...
7
votes
1answer
130 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
131 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
129 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
480 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
48 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
124 views

Single Digit Math Quiz

I decided to write a very simple web-game: ...
-2
votes
1answer
191 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
243 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 ...
14
votes
1answer
630 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
313 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
232 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
462 views

JavaScript “snow” animation

I have worked for a few hours and this is the result: ...
3
votes
1answer
138 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
168 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
85 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
619 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
206 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
288 views

Fast draw wxPython OnPaint

I have the following wx.Window: ...
1
vote
1answer
268 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
78 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 ...
1
vote
1answer
42 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. ...
2
votes
1answer
382 views

Can the performance of this canvas drawImage() test be improved?

I have a quite simple loop that draws an 8px by 8px image many times in a canvas in a tiling fashion. Currently it's drawing 7500 images each loop. See the jsfiddle. ...
8
votes
1answer
2k views

HTML5 Tic-Tac-Toe game

I created an HTML5/JS tic-tac-toe game as an exercise and wanted some advice on my js code. A couple of questions: How can I improve the reset method? (currently reloads the page/re-initializes ...
7
votes
2answers
75 views

Isometric Projection and Culling

I'm working on a small isometric drawing system in JavaScript. After much help from the Gamedev section, reading old questions, I've got something working. However, it's still a little hacky. I need ...
10
votes
2answers
506 views

Canvas loading animation - follow-up

This is kind of a follow-on from here: Canvas animation I've been trying to copy the following GIF animation using a canvas. I have re-factored the code following Stuart's pointers and wanted to ...
5
votes
1answer
392 views

Canvas animation

Just started learning how to use the canvas today as I wanted to copy an animated GIF. The GIF I tried to copy is below. The animation does work but I've hacked it left and right. There's ...
4
votes
2answers
80 views

Photoshop Color Picker Gradient

I'm trying to improve my Color Picker code. It works like Photoshop and I don't want to use a library. ...
4
votes
2answers
165 views

Increase performance on canvas repainting

I'm working on a little project where I have to create sort of an image mask. Overall my code works quite good in all browsers but sporadically the animations "flickr" on Chrome (Windows). So I was ...
15
votes
4answers
17k views

Snake game with canvas element code

I created a classic snake game in the canvas element. I have not considered best practices when doing this, I just wanted to finish it first. Now it's time to improve the coding practice. You can ...
2
votes
1answer
109 views

Writing my own jQuery plugin

I am trying to write a jQuery Plugin from a piece of JS code I had written. What this plugin does is it converts a select box into a map of Australia where I can select individual states. It's ...