Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange
The results are in! See what nearly 90,000 developers picked as their most loved, dreaded, and desired coding languages and more in the 2019 Developer Survey.

Questions tagged [canvas]

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

3
votes
1answer
36 views

Monte Carlo pi animation

I have created a program that calculates pi using a Monte Carlo method. It also animates the process and displays the value as it is updated to show how it gets closer and closer to the actual value ...
1
vote
1answer
49 views

Mandelbrot Set generator

I want to reduce the big time it needed for my mandelbrot set generator to work. I'm working this for already a week. I tried to reduce the canvas size from 400 by 400 to 200 by 200 and the speed ...
2
votes
1answer
22 views

Recamán Sequence Animation

I wrote a program that animates the Recamán sequence. It is in uses HTML canvas and JavaScript. I was hoping for some feedback on how it could be improved. ...
2
votes
2answers
69 views

JavaScript flood fill

I tried to implement a very simple color flood fill to experiment a bit with Javascript. All comments about the code are welcome but I am especially interested in performance as it seems to be a bit ...
2
votes
0answers
91 views

Simple jumping game: continue with jquery or switch to html5 canvas?

I'm coding for fun with the secret ambition of making a fun little game for mobile. So I started out building this little jumping game with Javascript and jQuery. The game relies heavy on css ...
4
votes
1answer
40 views

Sierpinski’s Gasket Triangle in JavaScript

I wrote the Sierpinski’s Gasket Triangle in JavaScript, but I feel the code can be better, especially from L32 to L47. Could you make it more organized? ...
4
votes
0answers
84 views

Two player snake game

I created a 2 player Snake game from my original one player version. I am looking for some feedback on how I made it. I think I could use improvement when handling input (...
1
vote
2answers
52 views

Wireframe animation on canvas is slow

I'm recently working on a project that involves animation in the background. It works well on desktop but performance drops drastically on mobile. I'm using Paper.js to import a svg and animate it. ...
4
votes
0answers
66 views

JavaScript canvas Snake game

This is my 3rd JavaScript canvas game. It's basically just snake right now but I am planning on adding some more aspects to it soon. I was wondering if I could get some feedback especially on how I'm ...
1
vote
2answers
40 views

A function that generates arrays of video thumbnails using canvas

I have just finished my first version of a function that returns an array of video screenshots created with canvas. What I am looking for are ways to improve this speed by as much as possible. I want ...
5
votes
1answer
184 views

Rendering explosion of bouncing balls on a canvas

I'm making a particle engine that can spawn new explosions while keeping particles from previous ones active (until they despawn). The code works well on its own but within the game, two or more ...
-1
votes
1answer
311 views

Breaking up a simple Paint application into smaller classes

(Sorry this is a repeat post, I hadn't logged in on my initial question and am unable to respond) I currently have a working code for a simple paint application but it is all in one file and very ...
2
votes
2answers
703 views

Javascript: Canvas drawing - storing mouse coordinates

I have a small JS application that allows a user, after clicking on a canvas, to draw a picture. Once the user clicks the mouse, the user is allowed to drag the mouse wherever they want within the ...
3
votes
0answers
109 views

Sierpinski triangle html canvas Implementation

I wrote my Sierpinski Triangle fractal animation using html canvas with js: JsFiddle Code: ...
6
votes
3answers
447 views

My re-written snake game in Javascript

This a snake game I wrote about 1 month ago. It's working well. Looking for any suggestions for my code, I want my coding improved. jsfiddle link http://jsfiddle.net/geswhvdc/ ...
3
votes
0answers
17 views

Loading NRRDs, images and names of parts and segments

I am creating a program to show NRRDs which are a format of medical images. In addition it loads a gallery of thumbnails, where each thumbnail has a link to change the selected NRRD. Plus there is a ...
10
votes
1answer
180 views

Snake on a Plane

My code uses a canvas element to create a live snake game on a plane! ...
2
votes
3answers
597 views

Display Thousands/Millions of different background images

Kindly help me check this code, I want to be able to make it load thousands/millions of different pictures as HTML background without crashing or slowing down the browser. The images can be created ...
4
votes
0answers
43 views

Tweaking this Pong Game to embed a smarter AI

I am new to game development and took on the task to create a Pong replica due to my curiosity and interest in the field. I decided to write it in JavaScript because the game is not too labor ...
0
votes
1answer
162 views

Improving canvas pre-rendering [closed]

I define my canvas as you normally would, but I also include a bunch of different makeshift canvases: ...
2
votes
0answers
144 views

Inventory and stats for a game with Tkinter

It's an inventory UI and also displays the player's stats. I have been programming for a year or more and I want to improve my code. ...
5
votes
1answer
509 views

JavaScript Graphing Calculator

I have a pretty functional JavaScript based graphing calculator. Functions like \$\space tan(x)\$, \$\space\frac{1}{tan(x)}\space\$ and \$\space x^{high\space number}\space\$ look weird, however ...
4
votes
2answers
162 views

Lorentz Attractor visualization using functional programming

I have been working on this Lorenz Attractor visualization for the past day. I am currently also trying to change my coding style into a more functional programming one. I find it quite hard, to be ...
2
votes
0answers
56 views

App showing a welcome page with an animal's picture

I have an app which shows a welcome page with an animal's picture. Also, we can navigate to a second view, where there are two canvas, and a collapsable panel which hosts controls' inputs. The aim of ...
1
vote
1answer
38 views

Display class containing a Canvas in a JFrame

I've been using this class for so long, I never thought about how terribly big and how bad it looks. Looking back on it, this class looks so out-of-date, and nothing explains itself; I want to get it ...
1
vote
1answer
717 views

Read an image file into a canvas and display click coordinates

I am a beginner in JavaScript, which I have started studying since Summer last year. My code's purpose is read a file from file explorer, and put that image in a canvas. Also there is code to allow ...
2
votes
2answers
247 views

Drawing a castle and towers with acm.graphics

The following code is my solution of exercise 10 of chapter 5 of The Art and Science of Java. So here, using acm program and graphics, I need to draw a castle with two side towers and other three ...
10
votes
2answers
429 views

Implement a Tetris game in JavaScript using HTML5 Canvas

I just wrote a Tetris game and I'd like to ask experienced people for a code review, especially in terms of code efficiency and bad coding habits, and if the code is easy to reason about. Here is the ...
2
votes
1answer
438 views

A simple JavaScript and HTML5 Canvas drawing component

This is my first time writing a Vanilla JS plugin. I have tried to make a simple HTML5 canvas drawing script. I have tried to handle both touch and mouse events on the canvas. Kindly help me point ...
7
votes
1answer
301 views

Yet another flappy bird clone

This is my first game, and I really want to improve my coding skills. Please review my flappy bird clone implementation and let me know how it could be optimized, and any other coding tips. ...
2
votes
1answer
4k views

Manipulating images and text on a canvas using Fabric.js

I have a small application that allows a user to manipulate objects on a canvas with fabric.js. I'm new to JS and Fabric.js, and I'm hoping to get some direction on how I could write this neater: <...
0
votes
1answer
51 views

How to run canvas animation without effecting other javascript code [closed]

It seems to be the case that the canvas animation affects other JavaScript functions when I use window.onload = function() {. Please let me know the best practice ...
2
votes
1answer
2k views

Redraw text on change, with automatic zooming, using fabric.js

My code works, but I think that my code is non-standard, not optimized, and has poor logic. I want to improve my coding skills, so please suggest how to improve my code. ...
2
votes
1answer
56 views

Plotting points representing many events on a canvas

I have a web app which uses Node canvas to plot points on a graph. Each point is called an 'event'. An event is an array of usually 6 'parameters' represented as numbers. My app allows users to plot 2 ...
1
vote
1answer
3k views

On right click draw triangle to the canvas

This is a simple program that using easelJS adds functionality to the right click, when the right mouse button is clicked a triangle is drawn to the screen. I am just wanting to get the opinions of ...
4
votes
2answers
206 views

Game of life - JavaScript

I would like to kindly ask others to review my code. I'd like suggestions, criticisms, and discussions on what is good and what could be done better. ...
0
votes
4answers
3k views

Python Tkinter game, “Bubble, Blaster”

I have 148 lines of code... ...
7
votes
1answer
3k views

Space Invaders-like game in JavaScript

In this game, you play as a small red square and move left and right on the screen trying to shoot the yellow boxes that fall from the top of the screen. It is infinite and each time you remove a line ...
4
votes
1answer
561 views

Classing Pong game

I have just started coding. Anything to help simply or improve the code? This is fully finished and ready to play, though the ball bounces off the wall directly behind the paddle, rather than off ...
2
votes
0answers
52 views

Detect objects that the mouse is close to

Here is a little widget that I've made. I'm looking to refactor the way that I'm doing hit detection. Currently, every square on the screen finds the distance between itself and the cursor. Because ...
5
votes
1answer
204 views

Particle text directive

Directive that shows text as particles on a canvas. Looking for a general review. Plunker here. image.service.js: ...
1
vote
0answers
559 views

Drawing a board for the board game GO (HTML canvas)

I am working on a GO game in JavaScript and drawing the board is important to be efficient because it gets ran multiple times a second. As when the user moves their mouse, it will simulate where their ...
1
vote
0answers
130 views

Image color reduction

Just for the fun of it, I was looking of ways to make true-color GIFs. I've started to write the code, and it clicked me: this won't work for that, but it does make a nice color-reduction method. ...
3
votes
1answer
1k views

Frogger HTML5 JavaScript Canvas Game using Object Oriented Design

I created a Frogger game using JavaScript and HTML5. The game runs fine, but that might be because the complexity is so low. I'm looking for ways to improve the code. Some aspects of this game are ...
5
votes
2answers
608 views

Sunset animation in a canvas

I'm new to JavaScript, and wrote this little animation in canvas. I'm wondering if anyone has any suggestions as for how to improve it. When running the code, the JavaScript draws a scene of three ...
4
votes
2answers
226 views

Efficient way to calculate game time

It's a common occurrence nowadays to have different refresh rates across different devices. That's why it's very important to keep track of the device's frame rate to keep the game time consistent ...
4
votes
2answers
551 views

JavaScript metaballs optimization

I created this basic metaball visualization in JavaScript. While it does look nice, it is very slow if you increase number of balls and/or make drawing area larger. I think that the performance is so ...
4
votes
1answer
142 views

Hoc462 - A Raycaster

For the past week, I've been making a raycaster in JS and if you want a live demo, you can try it here. It ran smoothly before I added variable height walls but now it is very slow (~15 FPS) so I want ...
0
votes
1answer
127 views

Drawing circles with the mouse using Quil+Clojure

I've recently begun using Clojure, and I wanted to translate a project that I wrote with p5.js to us Clojure and quil. Unfortunately, the code resulting from a direct translation is bad enough to make ...
3
votes
1answer
1k views

JavaScript implementation of Conway's Game Of Life With HTML5 Canvas

I've implemented Conway's Game Of Life with pure JavaScript and HTML5 Canvas. I'm not very good at JS patterns, so are there any ideas on how I can improve this code? For Online demo refer to this ...