Putting rectangle object on border of canvas
I'm making a program that regards bouncing balls, when they are the same color and touch each other they spawn a new ball. Now I want to add a rectangle object on part of the border that if touched by the balls will destroy the ball object. I'm having issues setting rectangles on the border of the left and right side of the canvas. Here is my code where i draw the rectangles on the border of the canvas.
function Wall(x,y,width,height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
ctx.strokeStyle = 'red';
ctx.lineWidth = '6';
ctx.strokeRect(canvas.width/2, 0, canvas.width, 0); //top, right half
ctx.strokeRect(-canvas.width/2, canvas.height , canvas.width,0); //bottom,left half
ctx.strokeRect(-canvas.width/2, 0, canvas.height/2, 0); //Where i want to border left side, top half, DOESNT WORK
}
I feel like it's something really simple that I'm missing. Or is there a better way to go about this concept?
javascript canvas border
asked Nov 25 '18 at 22:31
TheManCTheManC
204
add a comment |
I'm making a program that regards bouncing balls, when they are the same color and touch each other they spawn a new ball. Now I want to add a rectangle object on part of the border that if touched by the balls will destroy the ball object. I'm having issues setting rectangles on the border of the left and right side of the canvas. Here is my code where i draw the rectangles on the border of the canvas.
function Wall(x,y,width,height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
ctx.strokeStyle = 'red';
ctx.lineWidth = '6';
ctx.strokeRect(canvas.width/2, 0, canvas.width, 0); //top, right half
ctx.strokeRect(-canvas.width/2, canvas.height , canvas.width,0); //bottom,left half
ctx.strokeRect(-canvas.width/2, 0, canvas.height/2, 0); //Where i want to border left side, top half, DOESNT WORK
}
I feel like it's something really simple that I'm missing. Or is there a better way to go about this concept?
javascript canvas border
asked Nov 25 '18 at 22:31
TheManCTheManC
204
add a comment |
I'm making a program that regards bouncing balls, when they are the same color and touch each other they spawn a new ball. Now I want to add a rectangle object on part of the border that if touched by the balls will destroy the ball object. I'm having issues setting rectangles on the border of the left and right side of the canvas. Here is my code where i draw the rectangles on the border of the canvas.
function Wall(x,y,width,height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
ctx.strokeStyle = 'red';
ctx.lineWidth = '6';
ctx.strokeRect(canvas.width/2, 0, canvas.width, 0); //top, right half
ctx.strokeRect(-canvas.width/2, canvas.height , canvas.width,0); //bottom,left half
ctx.strokeRect(-canvas.width/2, 0, canvas.height/2, 0); //Where i want to border left side, top half, DOESNT WORK
}
I feel like it's something really simple that I'm missing. Or is there a better way to go about this concept?
javascript canvas border
asked Nov 25 '18 at 22:31
TheManCTheManC
204
I'm making a program that regards bouncing balls, when they are the same color and touch each other they spawn a new ball. Now I want to add a rectangle object on part of the border that if touched by the balls will destroy the ball object. I'm having issues setting rectangles on the border of the left and right side of the canvas. Here is my code where i draw the rectangles on the border of the canvas.
function Wall(x,y,width,height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
ctx.strokeStyle = 'red';
ctx.lineWidth = '6';
ctx.strokeRect(canvas.width/2, 0, canvas.width, 0); //top, right half
ctx.strokeRect(-canvas.width/2, canvas.height , canvas.width,0); //bottom,left half
ctx.strokeRect(-canvas.width/2, 0, canvas.height/2, 0); //Where i want to border left side, top half, DOESNT WORK
}
I feel like it's something really simple that I'm missing. Or is there a better way to go about this concept?
javascript canvas border
javascript canvas border
asked Nov 25 '18 at 22:31
TheManCTheManC
204
asked Nov 25 '18 at 22:31
TheManCTheManC
204
asked Nov 25 '18 at 22:31
TheManCTheManC
204
asked Nov 25 '18 at 22:31
TheManCTheManC
204
asked Nov 25 '18 at 22:31
TheManCTheManC
204
204
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You need to use the right coordinates — the top corner is simply 0, 0.
function Wall() {
let canvas = document.getElementById('myCanvas')
ctx = canvas.getContext('2d')
ctx.strokeStyle = 'red';
ctx.lineWidth = '6';
ctx.strokeRect(canvas.width/2, 0, canvas.width, 0); //top, right half
ctx.strokeRect(0, canvas.height , canvas.width/2,0); //bottom,left half
ctx.strokeRect(0, 0, 0, canvas.height/2);
ctx.strokeRect(canvas.width, canvas.height/2, canvas.width, canvas.height);
}
Wall()<canvas id="myCanvas"></canvas>answered Nov 25 '18 at 22:38
Mark MeyerMark Meyer
38.9k33160
add a comment |
Not sure I've all understood (especially why you use negative coordinates) but it should do the job:
ctx.strokeRect(-canvas.width/2, 0, canvas.width, 0)
answered Nov 25 '18 at 22:37
PragmateekPragmateek
9,26685488
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53472677%2fputting-rectangle-object-on-border-of-canvas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to use the right coordinates — the top corner is simply 0, 0.
function Wall() {
let canvas = document.getElementById('myCanvas')
ctx = canvas.getContext('2d')
ctx.strokeStyle = 'red';
ctx.lineWidth = '6';
ctx.strokeRect(canvas.width/2, 0, canvas.width, 0); //top, right half
ctx.strokeRect(0, canvas.height , canvas.width/2,0); //bottom,left half
ctx.strokeRect(0, 0, 0, canvas.height/2);
ctx.strokeRect(canvas.width, canvas.height/2, canvas.width, canvas.height);
}
Wall()<canvas id="myCanvas"></canvas>answered Nov 25 '18 at 22:38
Mark MeyerMark Meyer
38.9k33160
add a comment |
You need to use the right coordinates — the top corner is simply 0, 0.
function Wall() {
let canvas = document.getElementById('myCanvas')
ctx = canvas.getContext('2d')
ctx.strokeStyle = 'red';
ctx.lineWidth = '6';
ctx.strokeRect(canvas.width/2, 0, canvas.width, 0); //top, right half
ctx.strokeRect(0, canvas.height , canvas.width/2,0); //bottom,left half
ctx.strokeRect(0, 0, 0, canvas.height/2);
ctx.strokeRect(canvas.width, canvas.height/2, canvas.width, canvas.height);
}
Wall()<canvas id="myCanvas"></canvas>answered Nov 25 '18 at 22:38
Mark MeyerMark Meyer
38.9k33160
add a comment |
You need to use the right coordinates — the top corner is simply 0, 0.
function Wall() {
let canvas = document.getElementById('myCanvas')
ctx = canvas.getContext('2d')
ctx.strokeStyle = 'red';
ctx.lineWidth = '6';
ctx.strokeRect(canvas.width/2, 0, canvas.width, 0); //top, right half
ctx.strokeRect(0, canvas.height , canvas.width/2,0); //bottom,left half
ctx.strokeRect(0, 0, 0, canvas.height/2);
ctx.strokeRect(canvas.width, canvas.height/2, canvas.width, canvas.height);
}
Wall()<canvas id="myCanvas"></canvas>answered Nov 25 '18 at 22:38
Mark MeyerMark Meyer
38.9k33160
You need to use the right coordinates — the top corner is simply 0, 0.
function Wall() {
let canvas = document.getElementById('myCanvas')
ctx = canvas.getContext('2d')
ctx.strokeStyle = 'red';
ctx.lineWidth = '6';
ctx.strokeRect(canvas.width/2, 0, canvas.width, 0); //top, right half
ctx.strokeRect(0, canvas.height , canvas.width/2,0); //bottom,left half
ctx.strokeRect(0, 0, 0, canvas.height/2);
ctx.strokeRect(canvas.width, canvas.height/2, canvas.width, canvas.height);
}
Wall()<canvas id="myCanvas"></canvas>function Wall() {
let canvas = document.getElementById('myCanvas')
ctx = canvas.getContext('2d')
ctx.strokeStyle = 'red';
ctx.lineWidth = '6';
ctx.strokeRect(canvas.width/2, 0, canvas.width, 0); //top, right half
ctx.strokeRect(0, canvas.height , canvas.width/2,0); //bottom,left half
ctx.strokeRect(0, 0, 0, canvas.height/2);
ctx.strokeRect(canvas.width, canvas.height/2, canvas.width, canvas.height);
}
Wall()<canvas id="myCanvas"></canvas>function Wall() {
let canvas = document.getElementById('myCanvas')
ctx = canvas.getContext('2d')
ctx.strokeStyle = 'red';
ctx.lineWidth = '6';
ctx.strokeRect(canvas.width/2, 0, canvas.width, 0); //top, right half
ctx.strokeRect(0, canvas.height , canvas.width/2,0); //bottom,left half
ctx.strokeRect(0, 0, 0, canvas.height/2);
ctx.strokeRect(canvas.width, canvas.height/2, canvas.width, canvas.height);
}
Wall()<canvas id="myCanvas"></canvas>answered Nov 25 '18 at 22:38
Mark MeyerMark Meyer
38.9k33160
edited Nov 25 '18 at 22:41
answered Nov 25 '18 at 22:38
Mark MeyerMark Meyer
38.9k33160
answered Nov 25 '18 at 22:38
Mark MeyerMark Meyer
38.9k33160
answered Nov 25 '18 at 22:38
Mark MeyerMark Meyer
38.9k33160
38.9k33160
add a comment |
add a comment |
Not sure I've all understood (especially why you use negative coordinates) but it should do the job:
ctx.strokeRect(-canvas.width/2, 0, canvas.width, 0)
answered Nov 25 '18 at 22:37
PragmateekPragmateek
9,26685488
add a comment |
Not sure I've all understood (especially why you use negative coordinates) but it should do the job:
ctx.strokeRect(-canvas.width/2, 0, canvas.width, 0)
answered Nov 25 '18 at 22:37
PragmateekPragmateek
9,26685488
add a comment |
Not sure I've all understood (especially why you use negative coordinates) but it should do the job:
ctx.strokeRect(-canvas.width/2, 0, canvas.width, 0)
answered Nov 25 '18 at 22:37
PragmateekPragmateek
9,26685488
Not sure I've all understood (especially why you use negative coordinates) but it should do the job:
ctx.strokeRect(-canvas.width/2, 0, canvas.width, 0)
answered Nov 25 '18 at 22:37
PragmateekPragmateek
9,26685488
answered Nov 25 '18 at 22:37
PragmateekPragmateek
9,26685488
answered Nov 25 '18 at 22:37
PragmateekPragmateek
9,26685488
answered Nov 25 '18 at 22:37
PragmateekPragmateek
9,26685488
9,26685488
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53472677%2fputting-rectangle-object-on-border-of-canvas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
