Develop Reference

Need help writing a function to make any box inside the grid clickable and filled with colorwheel

I'm working on a pixel art project. What I was expecting to do here is be able to click any box inside the grid and render it with the the color from a color input.
I managed to understand how the loop works to create a grid using canvas and javascript. Next, I created a function called colorPicker() which allows me to click on any of the grid cells and take the value from the color input and render it that color. I used canvas.addEventListener("click", function(event) { ... })
and passed variables xCoord and yCoord with the value of event.x and event.y. This allows me to return the position of the mouse on click inside the grid.
The problem I'm running into right now is that it is only rendering 1 square out of all 400 I have drawn on the grid. The rendering works, it's just I can only click one box and render its color from the input.
Can anyone provide me with some help to solve this function just using the javascript logic I currently have right now?
var title = document.getElementById("title");
var canvas = document.getElementById("canvas");
var color = document.getElementById("color");
var btn = document.getElementById("btn");
var ctx = canvas.getContext("2d");
// The function that draws the grid
function drawGrid() {
ctx.fillStyle = "#009EFF";
ctx.fillRect(0, 0, 400, 400);
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
// The for loop that draws the x-axis
for (x = 0; x <= 400; x += 20) {
ctx.moveTo(x, 0);
ctx.lineTo(x, 400);
ctx.stroke();
}
// The for loop that draws the y-axis
for (y = 0; y <= 400; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(400, y);
ctx.stroke();
}
}
drawGrid();
// Function that clicks and fill grid boxes w / color
function colorPicker() {
canvas.addEventListener("click", function(event) {
var newColor = color.value;
ctx.fillStyle = newColor;
xCoord = event.x;
yCoord = event.y;
ctx.fillRect(0, 0, 20, 20);
console.log(xCoord, yCoord);
console.log(newColor);
});
}
colorPicker();
#canvas {
border: 1px solid black;
background-size: 100%;
display: block;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
<div class="color-wheel">
Color: <input type="color" id="color" />
</div>
<canvas id="canvas" width="400" height="400"></canvas>

Your problem is this line:
ctx.fillRect(0, 0, 20, 20);
Instead of filling the clicked cell, you’re filling only the upper left cell on every click.
Currently you’re just using (0, 0) here, when you should be calculating this position from the cursor. The coordinates used by the canvas and the cursor are different though, so you’ll need to write a conversion function:
function mousePosToCanvasPos(mouseX, mouseY) {
var canvasPos = canvas.getBoundingClientRect();
return {
x: Math.floor((mouseX - canvasPos.x) / 20) * 20,
y: Math.floor((mouseY - canvasPos.y) / 20) * 20,
};
}
The mousePosToCanvasPos() function gets the current rendered position of the canvas (canvasPos), and calculates the offset of the cursor from the upper left corner of the canvas (mouse_ - canvasPos._). It then rounds this value down to the nearest multiple of 20 to return the upper left corner of the clicked cell (Math.floor((mouse_ - canvasPos._) / 20) * 20). If you change your cell size to something other than 20, be sure to change it in this function too. Or better yet, extract the constant (var cellSize = 20).
Adding this function to your code gives us:
var title = document.getElementById("title");
var canvas = document.getElementById("canvas");
var color = document.getElementById("color");
var btn = document.getElementById("btn");
var ctx = canvas.getContext("2d");
// The function that draws the grid
function drawGrid() {
ctx.fillStyle = "#009EFF";
ctx.fillRect(0, 0, 400, 400);
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
// The for loop that draws the x-axis
for (x = 0; x <= 400; x += 20) {
ctx.moveTo(x, 0);
ctx.lineTo(x, 400);
ctx.stroke();
}
// The for loop that draws the y-axis
for (y = 0; y <= 400; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(400, y);
ctx.stroke();
}
}
drawGrid();
function mousePosToCanvasPos(mouseX, mouseY) {
var canvasPos = canvas.getBoundingClientRect();
return {
x: Math.floor((mouseX - canvasPos.x) / 20) * 20,
y: Math.floor((mouseY - canvasPos.y) / 20) * 20,
};
}
// Function that clicks and fill grid boxes w / color
function colorPicker() {
canvas.addEventListener("click", function(event) {
var newColor = color.value;
ctx.fillStyle = newColor;
var canvasCellPos = mousePosToCanvasPos(event.x, event.y);
ctx.fillRect(canvasCellPos.x, canvasCellPos.y, 20, 20);
console.log(event.x, event.y);
console.log(newColor);
});
}
colorPicker();
#canvas {
border: 1px solid black;
background-size: 100%;
display: block;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
<div class="color-wheel">
Color: <input type="color" id="color" />
</div>
<canvas id="canvas" width="400" height="400"></canvas>
You’ll notice that something’s still not quite right here: every time you fill a cell, it makes its border thinner. To solve this, you need to remove one pixel from each side of your fillRect:
ctx.fillRect(canvasCellPos.x + 1, canvasCellPos.y + 1, 18, 18);
var title = document.getElementById("title");
var canvas = document.getElementById("canvas");
var color = document.getElementById("color");
var btn = document.getElementById("btn");
var ctx = canvas.getContext("2d");
// The function that draws the grid
function drawGrid() {
ctx.fillStyle = "#009EFF";
ctx.fillRect(0, 0, 400, 400);
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
// The for loop that draws the x-axis
for (x = 0; x <= 400; x += 20) {
ctx.moveTo(x, 0);
ctx.lineTo(x, 400);
ctx.stroke();
}
// The for loop that draws the y-axis
for (y = 0; y <= 400; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(400, y);
ctx.stroke();
}
}
drawGrid();
function mousePosToCanvasPos(mouseX, mouseY) {
var canvasPos = canvas.getBoundingClientRect();
return {
x: Math.floor((mouseX - canvasPos.x) / 20) * 20,
y: Math.floor((mouseY - canvasPos.y) / 20) * 20,
};
}
// Function that clicks and fill grid boxes w / color
function colorPicker() {
canvas.addEventListener("click", function(event) {
var newColor = color.value;
ctx.fillStyle = newColor;
var canvasCellPos = mousePosToCanvasPos(event.x, event.y);
ctx.fillRect(canvasCellPos.x + 1, canvasCellPos.y + 1, 18, 18);
console.log(event.x, event.y);
console.log(newColor);
});
}
colorPicker();
#canvas {
border: 1px solid black;
background-size: 100%;
display: block;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
<div class="color-wheel">
Color: <input type="color" id="color" />
</div>
<canvas id="canvas" width="400" height="400"></canvas>

How to change the color of the circle on canvas every n seconds?

How could the size of the shadow change, every n seconds? I guess you have to constantly create a new circle and eliminate the previous one? How would this be done? And also, is not there a more optimal way?
function main() {
var canvas = document.getElementsByTagName("CANVAS")[0],
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = document.documentElement.scrollHeight;
var cW = canvas.width,
cH = canvas.height;
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, cW, cH);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#FFF";
ctx.shadowBlur = 5;
ctx.shadowColor = "#FFF";
ctx.arc(cW/2, cH/2, 50, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
}
window.addEventListener("load", main);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas></canvas>
</body>
</html>

Create a setInterval & an array of colors. Use Math.random to randomly select any color.
Modify the main function to accept colors as two parameters.
function main(bckColor, circleColor) {
var canvas = document.getElementsByTagName("CANVAS")[0],
ctx = canvas.getContext("2d");
if (canvas.height) {
canvas.height = 0;
}
canvas.width = window.innerWidth;
canvas.height = document.documentElement.scrollHeight;
var cW = canvas.width,
cH = canvas.height;
ctx.fillStyle = bckColor || "#000";
//ctx.fillStyle = "red" ;
ctx.fillRect(0, 0, cW, cH);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = circleColor || "#FFF";
ctx.shadowBlur = 5;
ctx.shadowColor = "#FFF";
ctx.arc(cW / 2, cH / 2, 50, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
}
var colorArray = ['red', 'green', 'yellow', 'blue', 'pink', 'brown', 'orange']
var changeColor = setInterval(function() {
let bckColor = colorArray[Math.floor(Math.random() * 7 + 1)];
let circleColor = colorArray[Math.floor(Math.random() * 7 + 1)];
main(bckColor, circleColor)
}, 2000)
window.addEventListener("load", main);
<canvas></canvas>

instead of animating the canvas itself with a redraw every x seconds, i would suggest using an overlay , create a circle div, position it over the canvas' circle and animate its shadow using css, you'll have all the controls you want like the shadow's color and distance, animation speed ..etc.
here's a fiddle ( the overlay is better positionned )
function main() {
var canvas = document.getElementsByTagName("CANVAS")[0],
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = document.documentElement.scrollHeight;
var cW = canvas.width,
cH = canvas.height;
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, cW, cH);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#FFF";
ctx.shadowBlur = 5;
ctx.shadowColor = "#FFF";
ctx.arc(cW / 2, cH / 2, 50, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
// position the overlay over the circle
overlay.style.top = (cH / 2 - 99) + 'px'
overlay.style.left = (cW / 2 - 50) + 'px'
}
window.addEventListener("load", main);
main()
const animationDuration = 2;
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
overlay.style.animationDuration = animationDuration + 's';
setInterval(function() {
overlay.style.color = getRandomColor()
}, animationDuration * 1000)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
canvas {
width: 100vw;
height: 100vh;
display: block;
}
#overlay {
border-radius: 50%;
background: none;
animation: shadow linear infinite;
margin: auto;
transform: translate(0, 50%);
color: green;
position: absolute;
z-index: 99;
width: 100px;
height: 93px;
}
#keyframes shadow {
0% 100% {
box-shadow: 0 0 0
}
50% {
box-shadow: 0 0 50px 20px
}
}
<canvas></canvas>
<div id="overlay">
</div>

Apply shadowBlur only to only 1 element on HTML Canvas

In my HTML canvas, I'm trying to apply the style shadowBlur, ONLY to the text element that says 'Artwork 1'.
But current if you see by running the code snippet, the shadowBlur gets applied to every other element too.
I also tried using ctx.save() and ctx.restore() too but it doesnt seem to work.
Any help is appreciated
var container = 'body';
var size = {
x: $(container).width(),
y: $(container).height()
};
var canvas = $('<canvas/>').attr({width: size.x, height: size.y}).appendTo(container),
ctx = canvas.get(0).getContext("2d");
ctx.globalCompositeOperation = 'xor';
window.requestFrame = (function(){
return window.requestAnimationFrame
})();
function render(){
ctx.clearRect(0,0,size.x,size.y);
ctx.lineWidth = 10;
ctx.strokeStyle = '#fff';
ctx.shadowColor = '#fff';
ctx.beginPath();
ctx.moveTo(-20,size.y/2);
for(var x = 0; x < size.x; x++){
ctx.lineTo(x,size.y/2+0.6*(20),1,1);
if (x == 100.00) {
ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText("Artwork 1 ",x,(size.y/2+0.6*(20)- 25 ));
ctx.shadowBlur = 50; /* this is applied to all elements instead of just the text*/
ctx.save();
ctx.fillStyle = "red";
ctx.fillRect(x, (size.y/2+0.6*(20)- 10 ), 20, 20);
}
if (x == 300.00) {
ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText("Artwork 2 ",x,(size.y/2+0.6*(20)- 25 ));
ctx.fillStyle = "red";
ctx.fillRect(x, (size.y/2+0.6*(20)- 10 ), 20, 20);
}
}
ctx.stroke();
requestFrame(render);
} /* END fn render */
render();
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #000;
}
html canvas, body canvas {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
<div>test</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Set the shadow before rendering the text, then turn it off afterward:
ctx.shadowBlur = 20; // call before draw operation require shadow
ctx.fillText("Artwork 1 ",x,(size.y/2+0.6*(20)- 25 ));
ctx.shadowBlur = 0; // remove shadow
Notice since the shadow in the previous code is overdrawn several times the result of new code will make it appear "weaker" which either force you to use a smaller blur radius (as shown) or to overdraw the text a couple of times (will require a different composition mode than xor).
The save() call can be removed.
var container = 'body';
var size = {
x: $(container).width(),
y: $(container).height()
};
var canvas = $('<canvas/>').attr({width: size.x, height: size.y}).appendTo(container),
ctx = canvas.get(0).getContext("2d");
ctx.globalCompositeOperation = 'xor';
window.requestFrame = (function(){
return window.requestAnimationFrame
})();
function render(){
ctx.clearRect(0,0,size.x,size.y);
ctx.lineWidth = 10;
ctx.strokeStyle = '#fff';
ctx.shadowColor = '#fff';
ctx.beginPath();
ctx.moveTo(-20,size.y/2);
for(var x = 0; x < size.x; x++){
ctx.lineTo(x,size.y/2+0.6*(20),1,1);
if (x == 100.00) {
ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.shadowBlur = 20; /* this is applied to all elements instead of just the text*/
ctx.fillText("Artwork 1 ",x,(size.y/2+0.6*(20)- 25 ));
ctx.shadowBlur = 0;
ctx.fillStyle = "red";
ctx.fillRect(x, (size.y/2+0.6*(20)- 10 ), 20, 20);
}
if (x == 300.00) {
ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText("Artwork 2 ",x,(size.y/2+0.6*(20)- 25 ));
ctx.fillStyle = "red";
ctx.fillRect(x, (size.y/2+0.6*(20)- 10 ), 20, 20);
}
}
ctx.stroke();
requestFrame(render);
} /* END fn render */
render();
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #000;
}
html canvas, body canvas {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
<div>test</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

(HTML5 Canvas) Fillstyle img doesnt move with my terrain path

I´m writting a canvas game. I have some random produced terrain made with lineTo(), closePath() and filled out with an img as fillStyle. So far so good. But when i move the terrain with js the img doesnt move with it and stays on the same place. Any Ideas? Tnx.

You need to translate the canvas with the movement before doing the fill. Also remember to beginPath before making your shape.
var pattern = document.getElementById('pattern');
var can = document.getElementById('can');
var ctx = can.getContext('2d');
var w = can.width = 300;
var h = can.height = 200;
pattern.width = pattern.height = 20;
var pctx = pattern.getContext('2d');
pctx.fillStyle = 'white';
pctx.fillRect(0, 0, 20, 20);
pctx.fillStyle = 'red';
pctx.fillRect(0, 0, 10, 10);
pctx.fillRect(10, 10, 10, 10);
pctx.fillRect(2, 12, 6, 6);
pctx.fillRect(12, 2, 6, 6);
var p = ctx.createPattern(pattern, 'repeat');
var x = 50;
var y = 50;
var radius = 50;
var xStep = 1;
var yStep = 2;
var trans = "on";
function ani() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w, h);
ctx.moveTo(x, y);
// beginPath clears any existing path
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 20);
ctx.fillStyle = p;
if (trans == "on") {
ctx.save();
// translate will offset the fill pattern
ctx.translate(x, y);
ctx.fill();
ctx.restore();
} else {
ctx.fill();
}
x += xStep;
y += yStep;
if (x > (w - radius) || x < radius) xStep *= -1;
if (y > (h - radius) || y < radius) yStep *= -1;
requestAnimationFrame(ani);
}
ani();
var btnOff = document.getElementById('trans_off');
var btnOn = document.getElementById('trans_on');
btnOff.addEventListener('click',function(){
btnOff.className = "selected";
btnOn.className = "";
trans = "off";
});
btnOn.addEventListener('click',function(){
btnOff.className = "";
btnOn.className = "selected";
trans = "on";
});
body {
background-color: #555555;
color: #F0F0F0;
font-family: sans-serif;
}
button {
color: #cccccc;
background-color: #333333;
border: 1px solid #cccccc;
}
button.selected {
color: white;
font-weight: bold;
}
Translate
<button id="trans_off">off</button>
<button id="trans_on" class="selected">on</button>
<hr/>
<canvas id="pattern"></canvas>
<canvas id="can"></canvas>

CSS3: change the color of the ball every time it bounces off the canvas wall

I have to create a ball game in HTML5/CSS3. JSFiddle for the same could be seen.
Now what I want is to change the ball color every time it bounces off the wall.
var context;
var dx = 4;
var dy = 4;
var y = 150;
var x = 10;
function draw() {
context = myCanvas.getContext('2d');
context.clearRect(0, 0, 300, 300);
context.beginPath();
context.arc(x, y, 20, 0, Math.PI * 2, true);
context.closePath();
context.fill();
if (x < 0 || x > 300)
dx = -dx;
if (y < 0 || y > 300)
dy = -dy;
x += dx;
y += dy;
}
setInterval(draw, 10);
#container {
text-align: center;
}
#myCanvas {
background: #fff;
border: 1px solid #cbcbcb;
text-align: center;
}
<div id="container">
<div>
<canvas id="myCanvas" width="300" height="300"></canvas>
</div>
</div>
I don't know how to do it. Can css3 be used to do this?

The random color function comes from here: https://stackoverflow.com/a/1484514/2042240
This will make it change at every bounce.
https://jsfiddle.net/e0b1gkc4/4/
var context;
var dx= 4;
var dy=4;
var y=150;
var x=10;
function draw(){
context= myCanvas.getContext('2d');
context.clearRect(0,0,300,300);
context.beginPath();
context.arc(x,y,20,0,Math.PI*2,true);
context.closePath();
context.fill();
if( x<0 || x>300){
dx=-dx;
context.fillStyle = getRandomColor();
}
if( y<0 || y>300){
dy=-dy;
context.fillStyle = getRandomColor();
}
x+=dx;
y+=dy;
}
setInterval(draw,10);
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}