Richard Lococo -Assignment 6 - Canvas

Developer
Richard
Size
2,286 Kb
Views
4,048
  1. Richard Lococo -Assignment 6 - Canvas Previews
  2. Richard Lococo -Assignment 6 - Canvas HTML Codes
  3. Richard Lococo -Assignment 6 - Canvas CSS Codes
  4. Richard Lococo -Assignment 6 - Canvas JS Codes

How do I make an richard lococo -assignment 6 - canvas?

What is a richard lococo -assignment 6 - canvas? How do you make a richard lococo -assignment 6 - canvas? This script and codes were developed by Richard on 16 January 2023, Monday.

Richard Lococo -Assignment 6 - Canvas Previews
IQ Test

Richard Lococo -Assignment 6 - Canvas - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Richard Lococo -Assignment 6 - Canvas </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="myCanvas" width="800" height="800" style="border:5px solid #009;">
<img id="image" src="http://lorempixel.com/300/200"/>
</canvas> <button onclick="stopColor()">Stop Toggling</button> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Richard Lococo -Assignment 6 - Canvas - Script Codes CSS Codes

/*#myCanvas{ width: 800px; height: 800px; border: solid;
}*/
button{ font-size: 2em; position: relative; margin-left: -800px; margin-top: 100px; z-index: 5;
}

Richard Lococo -Assignment 6 - Canvas - Script Codes JS Codes

$(document).ready(function(){	var canvas = document.getElementById('myCanvas');	if (canvas.getContext) {	var ctx = canvas.getContext('2d');	ctx.lineWidth = 15;
/*Here comes a square*/
ctx.rect(450, 20, 200, 300);
ctx.stroke();
ctx.fillStyle = "#914";
ctx.fill(); /*prepare for the circle*/
ctx.beginPath();
ctx.arc(680, 175, 80, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "#874";
ctx.fill(); /*plus symbol*/
ctx.beginPath();
ctx.moveTo(50, 70);
ctx.lineTo(50, 0);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(5, 30);
ctx.lineTo(100, 30);
ctx.stroke(); /*equal symbol*/
ctx.beginPath();
ctx.moveTo(150, 70);
ctx.lineTo(300, 70);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(150, 30);
ctx.lineTo(300, 30);
ctx.stroke(); }
});
/* An Image scaled twice the size*/
window.onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("image"); ctx.drawImage(img, 195, 395, 600, 400);
} /*setInterval animation*/
var animateColor = setInterval(function(){ setColor() }, 1000);
function setColor() { var x = document.body; x.style.backgroundColor = x.style.backgroundColor == "grey" ? "white" : "grey";
}
function stopColor() { clearInterval(animateColor);
}
Richard Lococo -Assignment 6 - Canvas - Script Codes
Richard Lococo -Assignment 6 - Canvas - Script Codes
Home Page Home
Developer Richard
Username keyboarddesk
Uploaded January 16, 2023
Rating 3
Size 2,286 Kb
Views 4,048
Do you need developer help for Richard Lococo -Assignment 6 - Canvas?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Richard (keyboarddesk) Script Codes
Name
Card display using foundation
Background inside text
Assignment 4 SCSS animation
ALPACA PRESENTATION
Index transfer
My attempt at Scrollspy
A Pen by Richard
Double swipe button
In class Week 4 - Mobile Navigation Patterns-Footer Nav
SVG animation introduction
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!