Solution Document Night

INSTITUTION: ------- UNIVERSITY
SCHOOL: ENGINEERING AND TECHNOLOGY
DEPARTMENT: COMPUTING INFORMATION

TECHNOLOGY
COURSE: COMPUTER SCIENCE
UNIT TITLE:
INIT CODE:
STUDENT NAME:
TASK: ASSIGNMENT
SUBMISSION DATE:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>

<style>
#myCanvas {
border: 1px solid black;
</style>
</head>
<body>

<canvas id='myCanvas' width='800' height='700'>
<script>
function draw() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// Draw a connect dots game animal on the canvas

context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI, false);
context.moveTo(100, 150);
context.strokeStyle = '#000000';
context.stroke();
//Finally, call the draw() function when the page loads:
window.onload = draw;
</script>
</body>
</html>
<1—THE SECOND CODE: -->
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" href="styles.css" />
<style>
#my-canvas{
border:1px solid black;
</style>
</head>
<body>
<canvas id='my-canvas' width='800' height='700'>
</canvas>
<script>
var canvasElem = document.getElementById('my-canvas');
var ctx = canvasElem.getContext('2d');
//Starting the function
function drawBullseye(x, y){
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(x - 30, y, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x - 30, y, 160, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x - 30, y, 20, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(x - 30, y, 140, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.arc(x - 30, y, 110, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x - 30, y, 90, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x - 30, y, 60, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(x - 30, y, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(x - 30, y, 15, 0, 2 * Math.PI);
ctx.fill();}
// Drawing Bulls eye
drawBullseye (400,250)
</script>
</body>
</html>
OTHER CODE
JAVA CODE. SAVE WITH THE APPROPRIATE NAME AND INDICATE THE DIRECTORY:
var data = {
canvas: null,
ctx: null,
clickedDot: null,
dots: [{x: 100, y: 100}, {x: 200, y: 200}, {x: 200, y: 100}, {x: 100, y:
200}]

};
function circleCollision (c1, c2) {
var a = c1.r + c2.r,
x = c1.x - c2.x,
y = c1.y - c2.y;
if ( a > Math.sqrt( (x*x) + (y*y) ) ) return true;
else return false;
function prepCanvas () {
var res = window.devicePixelRatio || 1,
scale = 1 / res;
data.canvas = document.getElementById('dots');
data.ctx = data.canvas.getContext('2d');
data.canvas.width = window.innerWidth * res;
data.canvas.height = window.innerHeight * res;
data.canvas.style.width = window.innerWidth + 'px';
data.canvas.style.height = window.innerHeight + 'px';

data.ctx.scale(res, res);
data.canvas.addEventListener('mousedown', function (e) {
checkForDot(e);
});
function drawDots () {
var i = 0;
for (; i < data.dots.length; i++) {
var d = data.dots[i];
data.ctx.beginPath();
data.ctx.arc(d.x, d.y, 10, 0, 2*Math.PI);
data.ctx.fillStyle = '#777';
data.ctx.fill();
data.ctx.closePath();
}
function drawLine (toDot) {
data.ctx.beginPath();
data.ctx.moveTo(data.clickedDot.x, data.clickedDot.y);
data.ctx.lineTo(toDot.x, toDot.y);
data.ctx.lineWidth = 5;
data.ctx.strokeStyle = '#777';
data.ctx.stroke();
data.ctx.closePath();
function checkForDot (e) {

var i = 0, col = null;
for (; i < data.dots.length; i++) {
var d = data.dots[i],
c1 = {x: d.x, y: d.y, r: 10},
c2 = {x: e.pageX, y: e.pageY, r: 10};
if (circleCollision(c1, c2)) col = d;
}
if (col !== null) {
if (data.clickedDot !== null) drawLine(col);
data.clickedDot = col;
} else data.clickedDot = null;
prepCanvas();
drawDots();
SEPARATE THIS ONE WITH THE ABOVE AND RUN THE CODE DIFFERENTLY.
function getDocumentWidth() {
return Math.max(document.documentElement.clientWidth, window.innerWidth ||

0);
};
function getDocumentHeight() {
return Math.max(document.documentElement.clientHeight, window.innerHeight ||

0)
};
var canvas = document.getElementById('dotCanvas');
var context = canvas.getContext('2d');

var vw = getDocumentWidth(),
vh = getDocumentHeight();
// resize the canvas to fill the browser window
window.addEventListener('resize', onResize, false);
function onResize() {
vw = getDocumentWidth();
vh = getDocumentHeight();
resizeCanvas();
}
function resizeCanvas() {
canvas.width = vw;
canvas.height = vh;
drawDots();
}
resizeCanvas();
// grid
function drawGrid(){
var cellW = 10,
cellH = 10;

// vertical lines
for (var x = 0; x <= vw; x += cellW) {
context.moveTo(x, 0); // x, y
context.lineTo(x, vh);
}

// horizontal lines
for (var y = 0; y <= vh; y += cellH) {
context.moveTo(0, y); // x, y
context.lineTo(vw, y);
}
context.strokeStyle = "#cccccc";
context.stroke();
}
// drawGrid();
// dots
function drawDots() {
var r = 2,
cw = 30,
ch = 30;

for (var x = 20; x < vw; x+=cw) {
for (var y = 20; y < vh; y+=ch) {
context.fillStyle = '#000000';
context.fillRect(x-r/2,y-r/2,r,r);
}
}
}
drawDots();
THE HTML FILE FOR THE ABOVE TWO JavaScript CODE:
<!doctype html>
<html>
<head>
<title>Connecting Dots</title>
<style>
body {
margin:0;
.container {
width:100%;
height:100%;
#dotCanvas {
display:block;
</style>
</head>
<body>
<div class="container">
<canvas id="dotCanvas"></canvas>
</div>
<canvas id="dots"></canvas>
<script type="text/javascript" src="connecting-dots.js"></script>

</body>
</html>
REFERENCES
Grady, M. (2010). Functional programming using JavaScript and the HTML5 canvas element. Journal of
computing sciences in colleges, 26(2), 97-105.
Cecco, R. (2011). Supercharged JavaScript Graphics: with HTML5 canvas, jQuery, and More. " O'Reilly
Media, Inc.".
Hawkes, R. (2011). Foundation HTML5 Canvas: For Games and Entertainment. Apress.
Stanković, D. (2021). Elektronske lekcije o HTML5 Canvas tehnologiji.
Abudahab, K., Underwood, A., Taylor, B., Yeats, C., & Aanensen, D. M. (2021). Phylocanvas. gl: A
WebGL-powered JavaScript library for large tree visualisation.

Solution Document Night

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Solution Document Night

Uploaded by

Copyright:

Available Formats

INSTITUTION: ------- UNIVERSITY

SCHOOL: ENGINEERING AND TECHNOLOGY

DEPARTMENT: COMPUTING INFORMATION

COURSE: COMPUTER SCIENCE

border: 1px solid black;

<canvas id='myCanvas' width='800' height='700'>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

// Draw a connect dots game animal on the canvas

context.arc(100, 100, 50, 0, 2 * Math.PI, false);

context.arc(100, 150, 25, 0, 2 * Math.PI, false);

context.arc(50, 100, 25, 0, 2 * Math.PI, false);

context.arc(150, 100, 25, 0, 2 * Math.PI, false);

//Finally, call the draw() function when the page loads:

<1—THE SECOND CODE: -->

border:1px solid black;

<canvas id='my-canvas' width='800' height='700'>

var canvasElem = document.getElementById('my-canvas');

var ctx = canvasElem.getContext('2d');

//Starting the function

function drawBullseye(x, y){

ctx.arc(x - 30, y, 40, 0, 2 * Math.PI);

ctx.arc(x - 30, y, 160, 0, 2 * Math.PI);

ctx.arc(x - 30, y, 20, 0, 2 * Math.PI);

ctx.arc(x - 30, y, 140, 0, 2 * Math.PI);

ctx.arc(x - 30, y, 110, 0, 2 * Math.PI);

ctx.arc(x - 30, y, 90, 0, 2 * Math.PI);

ctx.arc(x - 30, y, 60, 0, 2 * Math.PI);

ctx.arc(x - 30, y, 40, 0, 2 * Math.PI);

ctx.arc(x - 30, y, 15, 0, 2 * Math.PI);

// Drawing Bulls eye

function circleCollision (c1, c2) {

var a = c1.r + c2.r,

if ( a > Math.sqrt( (x*x) + (y*y) ) ) return true;

else return false;

var res = window.devicePixelRatio || 1,

data.canvas.width = window.innerWidth * res;

data.canvas.height = window.innerHeight * res;

data.canvas.style.width = window.innerWidth + 'px';

data.canvas.style.height = window.innerHeight + 'px';

data.canvas.addEventListener('mousedown', function (e) {

for (; i < data.dots.length; i++) {

data.ctx.arc(d.x, d.y, 10, 0, 2*Math.PI);

function drawLine (toDot) {

function checkForDot (e) {

for (; i < data.dots.length; i++) {

c1 = {x: d.x, y: d.y, r: 10},

c2 = {x: e.pageX, y: e.pageY, r: 10};

if (circleCollision(c1, c2)) col = d;

if (col !== null) {

if (data.clickedDot !== null) drawLine(col);

} else data.clickedDot = null;

return Math.max(document.documentElement.clientWidth, window.innerWidth ||

return Math.max(document.documentElement.clientHeight, window.innerHeight ||

var canvas = document.getElementById('dotCanvas');

var context = canvas.getContext('2d');

// resize the canvas to fill the browser window

window.addEventListener('resize', onResize, false);

var cellW = 10,

for (var x = 0; x <= vw; x += cellW) {

if ( a > Math.sqrt( (xx) + (yy) ) ) return true;