On right click draw triangle to the SVG Map
up vote
0
down vote
favorite
I have seen below example and using this example i tried creating rectangle but that doesn't work, Please help me solve issue.
Actually i have to select one rectangle shape of size and then when i click on SVG map anywhere then rectangle should be created automatically on cursor position of size that i have selected. I have different size of Rectangle like 3x3 , 3x6 etc.
Code i tried is given below:
<html>
<head>
<style>
body {
margin: 0;
background-color: #d3d3d3;
font-family: Sans-Serif;
}
h1 {
font-weight: 100;
text-align: center;
}
canvas {
display: block;
margin: auto;
background-color: #fff;
border: solid 1px #000;
}
</style>
</head>
<body>
<h1>Right click to draw a Rectangle</h1>
<canvas id="myCanvas" width="900" height="700"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const rectangle = [ [30, 30], [30, 30], [30, 30],[30,30] ];
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("contextmenu", e => e.preventDefault() );
function mouseDown(event) {
const bounds = event.target.getBoundingClientRect();
const x = event.pageX - bounds.left - scrollX;
const y = event.pageY - bounds.top - scrollY;
if (event.which === 4) { drawShape(x, y, rectangle) }
}
function drawShape(x, y, shape) {
var i = 0;
ctx.fillStyle = "black";
ctx.beginPath();
while (i < shape.length) { ctx.lineTo( shape[i][0] + x, shape[i++][1] + y ) }
ctx.fill();
}
</script>
</body>
</html>
below is the link from where i have tried above example:
On right click draw triangle to the canvas
javascript svg
asked 17 mins ago
Sana Khan
1
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
favorite
I have seen below example and using this example i tried creating rectangle but that doesn't work, Please help me solve issue.
Actually i have to select one rectangle shape of size and then when i click on SVG map anywhere then rectangle should be created automatically on cursor position of size that i have selected. I have different size of Rectangle like 3x3 , 3x6 etc.
Code i tried is given below:
<html>
<head>
<style>
body {
margin: 0;
background-color: #d3d3d3;
font-family: Sans-Serif;
}
h1 {
font-weight: 100;
text-align: center;
}
canvas {
display: block;
margin: auto;
background-color: #fff;
border: solid 1px #000;
}
</style>
</head>
<body>
<h1>Right click to draw a Rectangle</h1>
<canvas id="myCanvas" width="900" height="700"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const rectangle = [ [30, 30], [30, 30], [30, 30],[30,30] ];
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("contextmenu", e => e.preventDefault() );
function mouseDown(event) {
const bounds = event.target.getBoundingClientRect();
const x = event.pageX - bounds.left - scrollX;
const y = event.pageY - bounds.top - scrollY;
if (event.which === 4) { drawShape(x, y, rectangle) }
}
function drawShape(x, y, shape) {
var i = 0;
ctx.fillStyle = "black";
ctx.beginPath();
while (i < shape.length) { ctx.lineTo( shape[i][0] + x, shape[i++][1] + y ) }
ctx.fill();
}
</script>
</body>
</html>
below is the link from where i have tried above example:
On right click draw triangle to the canvas
javascript svg
asked 17 mins ago
Sana Khan
1
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have seen below example and using this example i tried creating rectangle but that doesn't work, Please help me solve issue.
Actually i have to select one rectangle shape of size and then when i click on SVG map anywhere then rectangle should be created automatically on cursor position of size that i have selected. I have different size of Rectangle like 3x3 , 3x6 etc.
Code i tried is given below:
<html>
<head>
<style>
body {
margin: 0;
background-color: #d3d3d3;
font-family: Sans-Serif;
}
h1 {
font-weight: 100;
text-align: center;
}
canvas {
display: block;
margin: auto;
background-color: #fff;
border: solid 1px #000;
}
</style>
</head>
<body>
<h1>Right click to draw a Rectangle</h1>
<canvas id="myCanvas" width="900" height="700"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const rectangle = [ [30, 30], [30, 30], [30, 30],[30,30] ];
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("contextmenu", e => e.preventDefault() );
function mouseDown(event) {
const bounds = event.target.getBoundingClientRect();
const x = event.pageX - bounds.left - scrollX;
const y = event.pageY - bounds.top - scrollY;
if (event.which === 4) { drawShape(x, y, rectangle) }
}
function drawShape(x, y, shape) {
var i = 0;
ctx.fillStyle = "black";
ctx.beginPath();
while (i < shape.length) { ctx.lineTo( shape[i][0] + x, shape[i++][1] + y ) }
ctx.fill();
}
</script>
</body>
</html>
below is the link from where i have tried above example:
On right click draw triangle to the canvas
javascript svg
asked 17 mins ago
Sana Khan
1
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I have seen below example and using this example i tried creating rectangle but that doesn't work, Please help me solve issue.
Actually i have to select one rectangle shape of size and then when i click on SVG map anywhere then rectangle should be created automatically on cursor position of size that i have selected. I have different size of Rectangle like 3x3 , 3x6 etc.
Code i tried is given below:
<html>
<head>
<style>
body {
margin: 0;
background-color: #d3d3d3;
font-family: Sans-Serif;
}
h1 {
font-weight: 100;
text-align: center;
}
canvas {
display: block;
margin: auto;
background-color: #fff;
border: solid 1px #000;
}
</style>
</head>
<body>
<h1>Right click to draw a Rectangle</h1>
<canvas id="myCanvas" width="900" height="700"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const rectangle = [ [30, 30], [30, 30], [30, 30],[30,30] ];
canvas.addEventListener("mousedown", mouseDown);
canvas.addEventListener("contextmenu", e => e.preventDefault() );
function mouseDown(event) {
const bounds = event.target.getBoundingClientRect();
const x = event.pageX - bounds.left - scrollX;
const y = event.pageY - bounds.top - scrollY;
if (event.which === 4) { drawShape(x, y, rectangle) }
}
function drawShape(x, y, shape) {
var i = 0;
ctx.fillStyle = "black";
ctx.beginPath();
while (i < shape.length) { ctx.lineTo( shape[i][0] + x, shape[i++][1] + y ) }
ctx.fill();
}
</script>
</body>
</html>
below is the link from where i have tried above example:
On right click draw triangle to the canvas
javascript svg
javascript svg
asked 17 mins ago
Sana Khan
1
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 17 mins ago
Sana Khan
1
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 17 mins ago
Sana Khan
1
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 17 mins ago
Sana Khan
1
asked 17 mins ago
Sana Khan
1
1
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Sana Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sana Khan is a new contributor. Be nice, and check out our Code of Conduct.
Sana Khan is a new contributor. Be nice, and check out our Code of Conduct.
Sana Khan is a new contributor. Be nice, and check out our Code of Conduct.
Sana Khan is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Code Review Stack Exchange!
- 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.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2fcodereview.stackexchange.com%2fquestions%2f209500%2fon-right-click-draw-triangle-to-the-svg-map%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
