Questions tagged [canvas]
Canvas is a drawing element introduced to web development with HTML5.
185 questions
4
votes
5
answers
285
views
Gomoku game 5 in a row. Javascript simple game Canvas
Gomoku ★★★ (Tic Tac Toe)
There are many Gomoku (5 in a row) game projects on the Internet.
The scripts of these projects are freely available. Having analyzed them, I created my own
game code based on ...
2
votes
1
answer
80
views
A JavaFX canvas - based UI view component for representing data points in three dimensions
I have this pie chart. It encodes data points in three dimensions, which are encoded via
sector radius,
sector angle,
color intensity of the sector.
How it looks like?
(See here.)
Code
...
- 29.8k
2
votes
1
answer
106
views
An extended JavaScript plugin for rendering radial pie charts
(This post is the continuation of A JavaScript plugin for rendering radial pie charts.)
(See the continuation of this post.)
Now, you can mark up the radial pie charts via XML:
...
- 29.8k
3
votes
1
answer
94
views
A JavaScript plugin for rendering radial pie charts
(See also An extended JavaScript plugin for rendering radial pie charts.)
I have this JavaScript plugin:
rodde-radial-pie-chart.js:
...
- 29.8k
0
votes
1
answer
91
views
Comparing video recording algorithms in Java: no-compression vs. naive diff compressor
Usage of the program is in Facebook.
Intro
In this JavaFX program, a user is presented with a white canvas with a black circle at the center of the canvas. Then, the user has 10 seconds to record a ...
- 29.8k
3
votes
1
answer
271
views
Snake game using Canvas API
Edit 2: For anyone interested, you can play the game at buggysnake.com
Edit 1: I have typed up the code for making the body of the snake move. It's not perfect and there are small problems I need to ...
- 133
0
votes
1
answer
96
views
Create and store the level data for a remake of Super Mario Bros game
I am trying to remake Super Mario Bros. in JavaScript and I am trying to figure out if there is a more efficient/shorter way to create and store the level data. I have created 1-1 and here's what the ...
8
votes
2
answers
849
views
Python - Tkinter - Infinite Canvas World for drawing apps
We have worked an idea out that seems to have a wide usecase and there seems to be no examples for it on the web for python tkinter. Having unlimited space to draw can be crucial and can be done wrong ...
- 487
4
votes
2
answers
180
views
Python Tkinter UI Pattern Password Code
This post is less of a question and more of a hope for people to see my code which I know is far from great and give me some direction or simple tips on improving the quality of it.
Normal Stud:
...
- 41
0
votes
0
answers
58
views
I've coded a javascript snake game, but i'm not sure if i've used module pattern correctly
I've wrapped everything inside a gamecontroller, so that everything is private, was this a good idea? that was my first time using oop and module pattern. also the code is in a good shape, or must be ...
- 9
1
vote
1
answer
322
views
How to optimize loops drawing canvas pattern?
I have the following function that draws a canvas pattern. It works so slow when canvas size bigger then 512x512.
...
- 19
0
votes
2
answers
2k
views
Animate circle using Javascript and HTML5 Canvas
Animate circle using Javascript and HTML5 Canvas. The circle will be drawn at the center of the canvas. The initial radius will be 0 and will keep on increasing till 100 and then decrease till 0 and ...
user245050
2
votes
1
answer
169
views
Draw triangles on the HTML canvas optimization
There is a function that draws triangles on the canvas area in each lines:
...
- 123
2
votes
1
answer
125
views
Generate Multiple Instances of Canvas-based UI Object
Background
I'm interested in implementing a small script to display multiple independent instances of a Canvas-based control on one page. The ultimate intention is to add many similar controls to the ...
- 123
1
vote
1
answer
57
views
Draw shapes using the Html5 Canvas api
A while ago I decided to start working on a project that will keep me busy for a while and will help me sharpen my programming skills.
I do not underestimate the work behind apps like adobe xd, sketch....
- 76
2
votes
1
answer
265
views
Javascript speed of an animated object (planet orbiting sun)
So I am pretty new to JavaScript and I thought I might make an animation demonstrating a planet orbiting a sun in an elliptical orbit using Kepler's laws.
I am struggling to get the speed right. So I ...
- 23
5
votes
1
answer
103
views
Breaking a line segment into two where it encounters a rectangle
I have developed a function that takes a list of line segments and a rectangle that breaks the line segment into two where it encounters the rectangle. Here is a picture demonstration of what it does:
...
- 213
3
votes
0
answers
47
views
HTML 5 Canvas Drawing app
I made a small simple drawing app using HTML5 Canvas, learning how to use canvas.
You can right click to change color, scroll to change brush size, and click + drag to draw on the screen.
Any feedback ...
- 287
5
votes
2
answers
972
views
Make two random enemies shoot projectiles every second
Just finished my canvas game that is more or less replica of the old school arcade game "Space Invaders".
The code below chooses two random enemies every second (approximately) from the ...
- 283
9
votes
2
answers
428
views
Optimize a tile rendering algorithm for Swing Canvas
I have an algorithm that I use to render a text GUI using Swing's Canvas, it looks like this in practice:
My goal is to reach 60 frames per second for a full HD ...
- 427
2
votes
1
answer
886
views
JS + CANVAS Projectile Motion [closed]
Basically you've got a canvas, and you can click it to launch a ball in a certain angle and speed, everything is working fine, except for the arrow tip of the vector thing. I can't get it to draw ...
- 29
11
votes
1
answer
548
views
Battle City (Tank) replica
I'm learning JS and Canvas. A friend of mine gave me the task to create a Battle City replica. I've already managed to make the map and the player to move. Nothing fancy just some squares with a color,...
- 181
3
votes
1
answer
107
views
Learning javascript by developing a simple game
I am learning javascript and have developed a car game using:
HTML Canvas
javascript
The repository link is: https://github.com/lazycoder-007/car_race_html_javascript_game
The code is given below:
...
- 203
2
votes
0
answers
367
views
Canvas Drawing / Bucket Filing Kotlin
I have completed a solution for the below problem and uploaded it in Git Repo. I would be grateful if somebody can review in term of code quality, design and Kotlin language usage.
Repo
You're ...
2
votes
0
answers
53
views
HTML game engine within angular
I currently have a very very basic js script that runs something 30 times per second. This is later to be used in a game engine.
But now I'm not quite sure how I can best do that. This little script ...
- 283
6
votes
3
answers
1k
views
Performance in particles.js library
Hey I'm trying to optimise particles.js library from Vincent Garrau in order to get 60fps @ 500 particles ~.
I've already refactored the code to use a quad tree instead but it does not seem to be ...
- 163
5
votes
1
answer
3k
views
Chess game in JavaScript
I have created a chess game in JavaScript. Right now you can only play against another human.
...
- 593
2
votes
1
answer
1k
views
d3.js canvas performance
I've just rewritten this code (a simple gravitational restricted n-body simulation) to display using canvas, rather than SVG. The reason being that I'd like to be able to run it with many thousands of ...
- 143
2
votes
1
answer
1k
views
Plotting a parabola using Tkinter
I'm a beginner, and I have just written this basic code that simply plots a parabola in a graph.
Is it possible to make my code more efficient?
The process works by the creating lists of X and Y then ...
MiliAxe
4
votes
2
answers
2k
views
Edge detection in a canvas
I have one function in my code to detect edges in a canvas but it's the slowest part of my code and is used everywhere. If I could just optimise this, my whole program would speed up considerably.
...
- 163
6
votes
2
answers
3k
views
Improving particle performance in P5.js
I have modified a particle system to create an effect similar to the one that I want. However, with any substantial amount of particles it performs very slowly on my laptop (around 1.7 fps at the ...
- 245
2
votes
1
answer
92
views
React component to animate planets on a canvas
I wrote some JavaScript to generate some graphics on a canvas, on a regular HTML page.
I now want the same code to run in a component that is part of a React app. I've done this:
...
- 123
5
votes
1
answer
121
views
JS Simple game in canvas
I'm trying to learn javascript (especially the OOP part) and made this simple game. I'm looking for advice and ways to improve my code.
Did I handle OOP well enough?
What's the best way to create a ...
- 171
6
votes
1
answer
475
views
Tetris Game Javascript
I am creating Tetris in javascript. I have finished the basic mechanics. I would appreciate some feedback on how I could improve it.
Down, left, and right arrow keys move the piece while the up arrow ...
- 593
7
votes
1
answer
4k
views
15 Puzzle Game JavaScript
I have created a program that lets you play the fifteen puzzle game. You have to get the blocks into ascending order by moving them into the one open space. I would like some feedback on the code and ...
- 593
1
vote
1
answer
597
views
Upload image without src attribute
We gave an option for user to Upload the image
Image is uploading fine, but its not adding any img src tag for that uploaded image.... Is this is acceptable to upload image without using any img tag ?...
- 217
3
votes
1
answer
113
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 ...
- 593
2
votes
1
answer
183
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 ...
- 173
3
votes
1
answer
114
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.
...
- 593
3
votes
2
answers
2k
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 ...
- 295
2
votes
0
answers
412
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 ...
- 129
4
votes
1
answer
365
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?
...
- 230
8
votes
2
answers
819
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 (...
- 593
1
vote
2
answers
186
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. ...
- 13
4
votes
1
answer
135
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 ...
- 593
1
vote
2
answers
164
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 ...
- 477
5
votes
1
answer
1k
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 ...
- 269
0
votes
1
answer
821
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 ...
- 1
2
votes
2
answers
4k
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 ...
- 509
9
votes
1
answer
412
views
Sierpinski triangle html canvas Implementation
I wrote my Sierpinski Triangle fractal animation using HTML canvas with JavaScript: JsFiddle
What do you think about it? How I can optimize it, if you see a need for that?
Code:
...
- 315