JavaScript The Following is a sketchpad please add the following code to the sketchpad 1) Add code to select a tool, to change its color, colors that are to be included are black, blue, red,green, yellow and white 2) add a button click that when opens says hello world thanks Sketchpad 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) r 0 g 0 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) 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 300px width 400px 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 Tap or Drag to draw something

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 24, 2024

JavaScript The Following is a sketchpad please add the following code to the sketchpad: 1) Add code to select a tool, to change its color,

JavaScript

The Following is a sketchpad please add the following code to the sketchpad:

1) Add code to select a tool, to change its color, colors that are to be included are black, blue, red,green, yellow and white.

2) add a button click that when opens says hello world thanks

Sketchpad

Tap or Drag to draw something .

Step by Step Solution

There are 3 Steps involved in it

Step: 1

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

Step: 3

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Database Management For Business Leaders Building And Using Data Solutions That Work For You

Authors: Larry Ruddell

1st Edition

1973630249, 978-1973630241

More Books

Students also viewed these Databases questions

Question

★★★★★

One company had 40 percent of its workers and 20 percent of its managers resign during the first year after reorganizing into teams. What might account for this dramatic turnover? How might managers...

Answered: 1 week ago

Question

★★★★★

=+Budgeting and Standard Cost Systems 515 Billable Hours Audit Department: Staff 34,500 Partners 5,200 Tax Department: Staff 27,700 Partners 4,150 Small Business Accounting Department: Staff 22,800...

Answered: 1 week ago

Question

★★★★★

4 How can reward systems be used to engage staff? Provide examples to illustrate your answer.

Answered: 1 week ago

Question

★★★★★

OConnell & Co. expects its EBIT to be $74,000 every year forever. The firm can borrow at 7 percent. OConnell currently has no debt, and its cost of equity is 12 percent. If the tax rate is 35...

Answered: 1 week ago

Question

★★★★★

Question 9 1 p t s Which of the following is a reliable forensic science method: microscopic hair comparison bite mark comparison serology shoe print analysis

Answered: 1 week ago

Question

★★★★★

The industry and process you propose adopt blockchain (project). Past and current methods for carrying out the process targeted in your research. How you believe this blockchain application could be...

Answered: 1 week ago

Question

★★★★★

Paul Simon shoots a .2 kg puck at 25 m/s and Patrick Roy catches the puck for .3 seconds. How much force does Patrick Roy absorb?

Answered: 1 week ago

Question

★★★★★

Question 4. (11 points) Assume that a closed economy is characterized by the following equations: Consumption: C = 100 + (2/3) (Y -T) Tax: T = 600 Government spending: G = 500 Investment: I = 800 -...

Answered: 1 week ago

Question

★★★★★

1.Suppose you have two part-time jobs, Restaurant Server and Uber Driver. After younger servers start working for less, employers pay only $11 instead of $14 per hour. What happens to your supply of...

Answered: 1 week ago

Question

★★★★★

Problem 1 - Brinell E Rockwell El Bookmark this page Test clue Jul 2?, 202212200 {33 Brinell 8. Rockwell D.Dl'2. points [gradedl Brinell s Rockwell lBaRl is a high-end manufacturer of cutting and...

Answered: 1 week ago

Question

★★★★★

What is the expected change in production volume, on average, as the number of factory workers decreases by five? Please enter the value of the expected change in production volume with ONE digit to...

Answered: 1 week ago

Question

★★★★★

Question Who is eligible to claim the nonrefundable savers credit for salary reduction contributions to a 401(k) plan?

Answered: 1 week ago

Question

★★★★★

Question How can an employer provide retirement benefits to replace 401(k) benefits lost by an executive as a result of the $245,000 (in 2011, as indexed) compensation cap?

Answered: 1 week ago

Question

★★★★★

Question Can any type of business organization have an ESOP or stock bonus plan?

Answered: 1 week ago

Previous Question Next Question