JavaScript I\'m having trouble increasing the size of this sketchpad when I incr

ID: 3847689 • Letter: J

Question

JavaScript

I'm having trouble increasing the size of this sketchpad when I increase the size of the sketchpad it looses its accuracy when I try to draw on it.

1)please increase the sketch canvas and keep its drawing accuracy please

<html>
<head>
<title>Sketchpad</title>

// Variables to keep track of the mouse position and left-button status
var mouseX,mouseY,mouseDown=0;

// Variables to keep track of the touch position
var touchX,touchY;

// Draws a dot at a specific position on the supplied canvas name
// Parameters are: A canvas context, the x position, the y position, the size of the dot
function drawDot(ctx,x,y,size) {
// Let's use black by setting RGB values to 0, and 255 alpha (completely opaque)

//getting color form selection
var clr=document.getElementById("color").value;
//choosing color based on clr
//black color
if(clr=="BLACK"){
r=0; g=0; b=0; a=255;
}
//blue color
else if(clr=="BLUE"){
r=0; g=0; b=255; a=255;
}
//green color
else if(clr=="GREEN"){
r=0;g=255;b=0;a=255;
}
//red color
else if(clr=="RED"){
r=255; g=0; b=0; a=255;
}
//white color
else if(clr=="WHITE"){
r=255;g=255;b=255;a=255;
}
//yellow color
else if(clr=="YELLOW"){
r=255;g=255;b=0;a=255;
}
// Select a fill style
ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";

// Draw a filled circle
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}

// Clear the canvas context using the canvas width and height
function clearCanvas(canvas,ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// Keep track of the mouse button being pressed and draw a dot at current location
function sketchpad_mouseDown() {
mouseDown=1;
drawDot(ctx,mouseX,mouseY,12);
}

// Keep track of the mouse button being released
function sketchpad_mouseUp() {
mouseDown=0;
}

// Keep track of the mouse position and draw a dot if mouse button is currently pressed
function sketchpad_mouseMove(e) {
// Update the mouse co-ordinates when moved
getMousePos(e);

// Draw a dot if the mouse button is currently being pressed
if (mouseDown==1) {
drawDot(ctx,mouseX,mouseY,12);
}
}

// Get the current mouse position relative to the top-left of the canvas
function getMousePos(e) {
if (!e)
var e = event;

if (e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
}
else if (e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
}

// Draw something when a touch start is detected
function sketchpad_touchStart() {
// Update the touch co-ordinates
getTouchPos();

drawDot(ctx,touchX,touchY,12);

// Prevents an additional mousedown event being triggered
event.preventDefault();
}

// Draw something and prevent the default scrolling when touch movement is detected
function sketchpad_touchMove(e) {
// Update the touch co-ordinates
getTouchPos(e);

// During a touchmove event, unlike a mousemove event, we don't need to check if the touch is engaged, since there will always be contact with the screen by definition.
drawDot(ctx,touchX,touchY,12);

// Prevent a scrolling action as a result of this touchmove triggering.
event.preventDefault();
}

// Get the touch position relative to the top-left of the canvas
// When we get the raw values of pageX and pageY below, they take into account the scrolling on the page
// but not the position relative to our target div. We'll adjust them using "target.offsetLeft" and
// "target.offsetTop" to get the correct values in relation to the top left of the canvas.
function getTouchPos(e) {
if (!e)
var e = event;

if(e.touches) {
if (e.touches.length == 1) { // Only deal with one finger
var touch = e.touches[0]; // Get the information for finger #1
touchX=touch.pageX-touch.target.offsetLeft;
touchY=touch.pageY-touch.target.offsetTop;
}
}
}

// Set-up the canvas and add our event handlers after the page has loaded
function init() {
// Get the specific canvas element from the HTML document
canvas = document.getElementById('sketchpad');

// If the browser supports the canvas tag, get the 2d drawing context for this canvas
if (canvas.getContext)
ctx = canvas.getContext('2d');

// Check that we have a valid context to draw on/with before adding event handlers
if (ctx) {
// React to mouse events on the canvas, and mouseup on the entire document
canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
window.addEventListener('mouseup', sketchpad_mouseUp, false);

// React to touch events on the canvas
canvas.addEventListener('touchstart', sketchpad_touchStart, false);
canvas.addEventListener('touchmove', sketchpad_touchMove, false);
}
}
//function says hello world thanks
function sayBye(){
alert(" hello world ");
}
</script>

<body>
<div id="sketchpadapp">
<div class="leftside">
<br/><br/>
Tap or Drag to draw something .<br/><br />
Choose Color<br/><br>
<select id="color" width="100">
<option>BLACK</option>
<option>BLUE</option>
<option>GREEN</option>
<option>RED</option>
<option>WHITE</option>
<option>YELLOW</option>
<option>PURPLE</option>
</select>
<br/><br/>
<input type="submit" value="Clear Sketchpad" id="clearbutton"><br /> <br />
<input type="button" value="Click Me" id="thanks">
</div>
<div class="rightside">

<canvas id="sketchpad" height="300" width="400">
</canvas>
</div>
</div>
</body>
</html>

Explanation / Answer

Re-corrected Code:- NOTE:- when you change the size ; please make sure you also change in the stylesheet section also.I have doubled the size of the sketchpadh.The modified part is written in bold format

<html>
<head>
<title>Sketchpad</title>
<script type="text/javascript">
// Variables for referencing the canvas and 2dcanvas context
var canvas,ctx;
// Variables to keep track of the mouse position and left-button status
var mouseX,mouseY,mouseDown=0;
// Variables to keep track of the touch position
var touchX,touchY;
// Draws a dot at a specific position on the supplied canvas name
// Parameters are: A canvas context, the x position, the y position, the size of the dot
function drawDot(ctx,x,y,size) {
// Let's use black by setting RGB values to 0, and 255 alpha (completely opaque)

//getting color form selection
var clr=document.getElementById("color").value;
//choosing color based on clr
//black color
if(clr=="BLACK"){
r=0; g=0; b=0; a=255;
}
//blue color
else if(clr=="BLUE"){
r=0; g=0; b=255; a=255;
}
//green color
else if(clr=="GREEN"){
r=0;g=255;b=0;a=255;
}
//red color
else if(clr=="RED"){
r=255; g=0; b=0; a=255;
}
//white color
else if(clr=="WHITE"){
r=255;g=255;b=255;a=255;
}
//yellow color
else if(clr=="YELLOW"){
r=255;g=255;b=0;a=255;
}
// Select a fill style
ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
// Draw a filled circle
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
// Clear the canvas context using the canvas width and height
function clearCanvas(canvas,ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// Keep track of the mouse button being pressed and draw a dot at current location
function sketchpad_mouseDown() {
mouseDown=1;
drawDot(ctx,mouseX,mouseY,12);
}
// Keep track of the mouse button being released
function sketchpad_mouseUp() {
mouseDown=0;
}
// Keep track of the mouse position and draw a dot if mouse button is currently pressed
function sketchpad_mouseMove(e) {
// Update the mouse co-ordinates when moved
getMousePos(e);
// Draw a dot if the mouse button is currently being pressed
if (mouseDown==1) {
drawDot(ctx,mouseX,mouseY,12);
}
}
// Get the current mouse position relative to the top-left of the canvas
function getMousePos(e) {
if (!e)
var e = event;
if (e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
}
else if (e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
}
// Draw something when a touch start is detected
function sketchpad_touchStart() {
// Update the touch co-ordinates
getTouchPos();
drawDot(ctx,touchX,touchY,12);
// Prevents an additional mousedown event being triggered
event.preventDefault();
}
// Draw something and prevent the default scrolling when touch movement is detected
function sketchpad_touchMove(e) {
// Update the touch co-ordinates
getTouchPos(e);
// During a touchmove event, unlike a mousemove event, we don't need to check if the touch is engaged, since there will always be contact with the screen by definition.
drawDot(ctx,touchX,touchY,12);
// Prevent a scrolling action as a result of this touchmove triggering.
event.preventDefault();
}
// Get the touch position relative to the top-left of the canvas
// When we get the raw values of pageX and pageY below, they take into account the scrolling on the page
// but not the position relative to our target div. We'll adjust them using "target.offsetLeft" and
// "target.offsetTop" to get the correct values in relation to the top left of the canvas.
function getTouchPos(e) {
if (!e)
var e = event;
if(e.touches) {
if (e.touches.length == 1) { // Only deal with one finger
var touch = e.touches[0]; // Get the information for finger #1
touchX=touch.pageX-touch.target.offsetLeft;
touchY=touch.pageY-touch.target.offsetTop;
}
}
}

// Set-up the canvas and add our event handlers after the page has loaded
function init() {
// Get the specific canvas element from the HTML document
canvas = document.getElementById('sketchpad');
// If the browser supports the canvas tag, get the 2d drawing context for this canvas
if (canvas.getContext)
ctx = canvas.getContext('2d');
// Check that we have a valid context to draw on/with before adding event handlers
if (ctx) {
// React to mouse events on the canvas, and mouseup on the entire document
canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
window.addEventListener('mouseup', sketchpad_mouseUp, false);
// React to touch events on the canvas
canvas.addEventListener('touchstart', sketchpad_touchStart, false);
canvas.addEventListener('touchmove', sketchpad_touchMove, false);
}
}
//function says hello world thanks
function sayBye(){
alert(" hello world ");
}
</script>
<style>
/* Some CSS styling */
#sketchpadapp {
/* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.leftside {
float:left;
width:220px;
height:285px;
background-color:#def;
padding:10px;
border-radius:4px;
}
.rightside {
float:left;
margin-left:10px;
}
#sketchpad {
float:left;
height:600px;
width:800px;
border:2px solid #888;
border-radius:4px;
position:relative; /* Necessary for correct mouse co-ords in Firefox */
}
#clearbutton {
font-size: 15px;
padding: 10px;
-webkit-appearance: none;
background: #eee;
border: 1px solid #888;
}
#thanks {
font-size: 15px;
padding: 10px;
-webkit-appearance: none;
background: #eee;
border: 1px solid #888;
}
</style>
</head>
<body>
<div id="sketchpadapp">
<div class="leftside">
<br/><br/>
Tap or Drag to draw something .<br/><br />
Choose Color<br/><br>
<select id="color" width="100">
<option>BLACK</option>
<option>BLUE</option>
<option>GREEN</option>
<option>RED</option>
<option>WHITE</option>
<option>YELLOW</option>
<option>PURPLE</option>
</select>
<br/><br/>
<input type="submit" value="Clear Sketchpad" id="clearbutton"><br /> <br />
<input type="button" value="Click Me" id="thanks">
</div>
<div class="rightside">

<canvas id="sketchpad" height="600" width="800">
</canvas>
</div>
</div>
</body>
</html>

Navigate

JavaScript Help!!!! So I have my HTML but now I need help with JavaScript. So it

JavaScript It is possible to move object around the screen continuously. The fol

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

JavaScript I\'m having trouble increasing the size of this sketchpad when I incr

Question

Explanation / Answer

Related Questions

Navigate