Develop Reference

Border-radius on canvas elements

I'm creating a little game based on this code:
https://www.w3schools.com/graphics/tryit.asp?filename=trygame_default_gravity
everything ok, but I would like to put the border-radius on green stakes, does anyone have any ideas?
the part that creates the components is this:
function component(width, height, color, x, y, type) {
this.type = type;
this.score = 0;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.gravity = 0;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0;
}
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
While the part where he creates the green stakes is this:
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}

The components you draw on the <canvas> are not html elements, therefore you cant style them with CSS.
What you want is to replace your fillRect() function with a function that can draw rectangles with rounded corners.
One such function is provided as an answer to this stackoverflow question: How to draw a rounded rectangle using HTML Canvas?

how can I add border on my javascript Balls in canvas?

i found code for making moving balls in canvas.
now i can change ball's color but i want to make them with 1px border.
I am super beginner and tried to many things.. but Can not make them.
please help me..
here is code :
var canvas = {
element: document.getElementById('canvas'),
width: 1000,
height: 1000,
initialize: function () {
this.element.style.width = this.width + 'px';
this.element.style.height = this.height + 'px';
document.body.appendChild(this.element);
}
};
var Ball = {
create: function (color, dx, dy) {
var newBall = Object.create(this);
newBall.dx = dx;
newBall.dy = dy;
newBall.width = 40;
newBall.height = 40;
newBall.element = document.createElement('div');
newBall.element.style.backgroundColor = color;
newBall.element.style.strokeStyle = "black";
newBall.element.style.width = newBall.width + 'px';
newBall.element.style.height = newBall.height + 'px';
newBall.element.className += ' ball';
newBall.width = parseInt(newBall.element.style.width);
newBall.height = parseInt(newBall.element.style.height);
canvas.element.appendChild(newBall.element);
return newBall;
},
moveTo: function (x, y) {
this.element.style.left = x + 'px';
this.element.style.top =y + 'px';
},
changeDirectionIfNecessary: function (x, y) {
if (x < 0 || x > canvas.width - this.width) {
this.dx = -this.dx;
}
if (y < 0 || y > canvas.height - this.height) {
this.dy = -this.dy;
}
},
draw: function (x, y) {
this.moveTo(x, y);
var ball = this;
setTimeout(function () {
ball.changeDirectionIfNecessary(x, y);
ball.draw(x + ball.dx, y + ball.dy);
}, 1000 / 60);
}
};
canvas.initialize();
var ball1 = Ball.create("blue", 4, 3);
var ball2 = Ball.create("blue", 1, 5);
var ball3 = Ball.create("blue", 2, 2);
ball1.draw(70, 0);
ball2.draw(20, 200);
ball3.draw(300, 330);
where should i put something about border in here?

Since you have added the ball class to all your balls, you can easily accomplish this with CSS (I would recommend you handle your styling inside of your css and not your javascript).
.ball {
border 1px solid white;
}
You can read more about the syntax and what those value mean at the documentation (https://developer.mozilla.org/en-US/docs/Web/CSS/border).
If you decide you don't want to handle this in your style sheet, you can apply this style directly onto each ball in much the same manner.
newBall.element.style.border = '1px solid white';

Trouble with createLinearGradient in canvas

I have a trouble with linear gradient in canvas.
I'm trying to create and animate a dynamic canvas element after clicking somewhere in the screen and it's working on the desktop but it doesn't seem to work on Mobile (chrome) if I use ctx.createLinearGradient to fill the circle that was created.
var circle = new Circle(circleProp);//circleProp is all propertys for new circle
function onMenuClick(e){
e.preventDefault();
e.stopPropagation();
var posX = e.pageX || e.changedTouches[0].pageX;
var posY = e.pageY || e.changedTouches[0].pageY;
if(menuToggle){
circle.paint(usrAllCont);// here is ewerything to make it work;
usrMenu.style.display = "block";
usrMenu.style.zIndex = "100";
usrMenu.opacity();
menuToggle = false;
}else{
usrMenu.opacity();
menuToggle = true;
circle.paint(usrAllCont);// here is ewerything to make it work back;
}
}
Thanks you!
[Include questioner's test code from their comment]
var Circle = function(prop){
this.width = prop.width;
this.height = prop.height;
this.r = prop.r;
this.halfR = this.r / 2;
this.step = this.r / 30;
this.currentStep = this.r / 30;
this.inProcesStep;
this.x = prop.defX;
this.y = prop.defY;
this.anim = true;
this.toggleAnim = false;
this.resize = false;
this.direction = "front";
this.canvas = document.createElement("canvas");
this.ctx = this.canvas.getContext("2d");
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.style.position = "absolute";
this.canvas.style.top = "0px";
//this.color = "rgb(25,245,170)"
this.gradient = this.ctx.createLinearGradient(0,0, 0, prop.height);
this.gradient.addColorStop(0,"rgb(100,150,250");
this.gradient.addColorStop(1,"rgb(0,250,250");
};
Circle.prototype.paint = function(parent){
this.parent = parent;
this.parent.appendChild(this.canvas);
var ctx = this.ctx;
ctx.fillStyle = this.gradient;
ctx.beginPath();
ctx.arc(this.x, this.y, this.halfR ,0 ,2*Math.PI);
ctx.fill();
};
var w = document.documentElement.clientWidth;
var h = window.screen.height;
var radius = function(width, height){
var sum = Math.pow(width, 2) + Math.pow(height, 2);
return Math.sqrt(sum);
};
var conteiner = document.getElementById("conteiner");
var btn = document.getElementById("btn");
btn.addEventListener("click", onBtnClick);
btn.addEventListener("touchend", onBtnClick);
var circleProp = {
width: w,
height: h,
r: radius(w, h),
defX: 25,
defY: 25
};
var circle = new Circle(circleProp);
function onBtnClick(e){
e.preventDefault();
e.stopPropagation();
var posX = e.pageX || e.changedTouches[0].pageX;
var posY = e.pageY || e.changedTouches[0].pageY;
circle.paint(conteiner);
}
<div id="btn">click me</div>
<div id="conteiner"></div>

How do I get this HTML canvas animation to appear on top of my image?

new to stack and coding, trying to create a simplified detective game (definitely have bitten off more than I can chew, but I decided to give it a shot anyway).
Here's a codepen link to the code:
http://codepen.io/anon/pen/ZbZREp
*************** HTML *************************
None
************** CSS ***************************
body{
background:#000;
width: 100%;
height: 100%;
overflow:hidden;
}
****************JS ****************************
var canvas = document.createElement('canvas');
var w = canvas.width = 800,
h = canvas.height = 600;
var c = canvas.getContext('2d');
var img = new Image();
img.src = 'http://oi41.tinypic.com/4i2aso.jpg';
var background = new Image();
background.src = "https://i2.wp.com/i2.listal.com/image/2669447/500full.jpg";
var position = {x : w/3.2, y : h/2.5};
document.body.appendChild(canvas);
var particles = [];
var random = function(min, max){
return Math.random()*(max-min)*min;
};
/*canvas.onmousemove = function(e){
position.x = e.offsetX;
position.y = e.offsetY;
};*/
function Particle(x, y){
this.x = x;
this.y = y;
this.velY = -2;
this.velX = (random(1, 10)-5)/10;
this.size = random(3, 5)/10;
this.alpha = 1;
this.update = function(){
c.drawImage(background,0,0);
this.y += this.velY;
this.x += this.velX;
this.velY *= 0.99;
if(this.alpha < 0)
this.alpha = 0;
c.globalAlpha = this.alpha;
c.save();
c.translate(this.x, this.y);
c.scale(this.size, this.size);
c.drawImage(img, -img.width/2, -img.height/2);
c.restore();
this.alpha *= 0.96;
this.size += 0.02;//
};
}
var draw = function(){
var p = new Particle(position.x, position.y);
particles.push(p);
while(particles.length > 500) particles.shift();
c.globalAlpha = 2;
c.drawImage(background,0,0);
c.fillRect(0,0,w,h);
for(var i = 0; i < particles.length; i++)
{
particles[i].update();
}
};
setInterval(draw, 1000/60);
On codepen, if you comment out line 35 in the JS section, you'll see that there's a smoke animation BEHIND the detective's image (found it on codepen of course and thought it would make for a cool smoking animation). I was able to figure out how to get the detective image into the canvas, but I can't figure out how to get the smoke animation to appear in FRONT of detective's image. I've tried several methods including setting a Javascript picture onLoad, but out of all the methods, this is the closest I could get to my intended goal.
What am I doing wrong here?

Just draw the background image before you draw the particles:
var canvas = document.createElement('canvas');
var w = canvas.width = 800,
h = canvas.height = 600;
var c = canvas.getContext('2d');
var img = new Image();
img.src = 'http://oi41.tinypic.com/4i2aso.jpg';
var background = new Image();
background.src = "https://i2.wp.com/i2.listal.com/image/2669447/500full.jpg";
var position = {x : w/3.2, y : h/2.5};
document.body.appendChild(canvas);
var particles = [];
var random = function(min, max){
return Math.random()*(max-min)*min;
};
/*canvas.onmousemove = function(e){
position.x = e.offsetX;
position.y = e.offsetY;
};*/
function Particle(x, y){
this.x = x;
this.y = y;
this.velY = -2;
this.velX = (random(1, 10)-5)/10;
this.size = random(3, 5)/10;
this.alpha = 1;
this.update = function(){
//c.drawImage(background,0,0);
this.y += this.velY;
this.x += this.velX;
this.velY *= 0.99;
if(this.alpha < 0){this.alpha = 0;}
c.globalAlpha = this.alpha;
c.save();
c.translate(this.x, this.y);
c.scale(this.size, this.size);
c.drawImage(img, -img.width/2, -img.height/2);
c.restore();
this.alpha *= 0.96;
this.size += 0.02;//
};
}
var draw = function(){
var p = new Particle(position.x, position.y);
particles.push(p);
// draw the background image before you draw the particles
c.drawImage(background,0,0);
while(particles.length > 500) particles.shift();
for(var i = 0; i < particles.length; i++)
{
particles[i].update();
}
};
setInterval(draw, 1000/60);
body{ background-color: black; }
canvas{border:1px solid red; }

A HTML5 canvas ERROR

I'am trying to write a puzzle game in canvas,so i need to give each part of puzzle block a background image.
but always a error "Uncaught TypeError: Cannot read property 'drawImage' of undefined "
any help will be appreciated!
(function(){
function Block(image, l, t, w, h){
this.image = image;
this.left = l;
this.top = t;
this.width = w;
this.height = h;
}
Block.prototype.draw = function(context){
context.drawImage(this.image, this.left, this.top, this.width, this.height, this.left, this.top, this.width, this.height);
}
window.Block = Block;
})();
var el = document.getElementById("puzzle_area");
var ctx = el.getContext("2d");
var image = new Image();
image.src = "background0.jpg";
image.onload = init;
var width = 100;
var height = width;
function init(){
for(var i = 0; i < 16; i++){
var x = (i % 4) * width;
var y = parseInt(i / 4) * height;
var block = new Block(image, x, y, width, height);
block.draw(ctx);
}
}

Your draw() function requires a context parameter which you're not passing to it when you're calling it from within your Block() function/object. Add a context parameter to that and use it when calling "this.draw()".

I haven't tested it, but here is what I changed your code to:
(function(){
function Block(context, image, l, t, w, h){
this.image = image;
this.left = l;
this.top = t;
this.width = w;
this.height = h;
this.context = context;
this.draw();
}
Block.prototype.draw = function(){
this.context.drawImage(this.image, -this.left, -this.top, this.width, this.height, this.left, this.top);
}
window.Block = Block;
})();
var el = document.getElementById("puzzle_area");
var ctx = el.getContext("2d");
var image = new Image();
image.src = "background0.jpg";
image.onload = init;
var block = null;
var width = 100;
var height = width;
function init(){
for(var i = 0; i < 9; i++){
var x = (i % 400) * width;
var y = parseInt(i / 400) * height;
block = new Block(ctx, image, x, y, width, height);
// block is drawn automatically, no need to draw it again
// block.draw();
}
}