Google Apps Scripts and Web Development Tutorials and Resources by Laurence Svekis
This code is a Google Apps Script that is designed to remove leading whitespace or blank space from text elements within a Google Docs document. Let’s break it down step by step: In summary, this script goes through all text elements in a Google Docs document’s body, removes leading whitespace from each element if it … Read more
You can create a Google Apps Script to remove the first numbers up to the first period in Google Docs from all page elements if the element begins with a number. Here’s a sample script that you can use: Here’s how to use the script: The script will go through all the text elements in … Read more
Responding to User Input Draw a line on the canvas in response to user mouse movements code is below. canvas.addEventListener(‘mousemove’, function(event) { const x = event.offsetX; const y = event.offsetY; ctx.lineTo(x, y); ctx.stroke(); }); Explanation: An event listener for mousemove is added to the canvas. The offsetX and offsetY properties of the event provide the … Read more
To clear the entire canvas ctx.clearRect(0, 0, canvas.width, canvas.height); Explanation: clearRect(x, y, width, height) clears the specified rectangular area and sets it to transparent black. To clear the entire canvas, you can use the clearRect() method of the canvas’s 2D rendering context. This method clears the specified rectangular area, making it fully transparent. To clear … Read more
“Creating Dashed Lines with JavaScript & HTML5 Canvas! #WebDevelopment #JavaScript #HTML5Canvas #CodingTutorial #LearnToCode” YouTube Description: Dive into the fascinating world of web graphics with our latest tutorial on creating dashed lines using JavaScript and the HTML5 Canvas! This tutorial is perfect for beginners and seasoned developers alike, looking to add a unique visual touch to … Read more
The code effectively draws a semi-circle on the canvas. The semi-circle has a radius of 50 pixels, its center is located at the point (100, 75), and it spans from the right side (3 o’clock position) to the left side (9 o’clock position) of its center. This is a simple example of how to use … Read more
Drawing a Circle and Filling it Draw a circle on the canvas ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.stroke(); “Draw & Fill a Circle with HTML5 Canvas and JavaScript! #CodingTutorial #WebDsign #JavaScript #HTML5Canvas #LearnToCode” Dive into this engaging tutorial where we demonstrate how to draw and fill a circle using JavaScript and the … Read more
“Easy JavaScript Canvas Tutorial: Drawing a Line from Scratch! #LearnJavaScript #CodingTutorial #WebDevelopment #HTML5Canvas” Join us in this beginner-friendly tutorial where we dive into the basics of using JavaScript and HTML5 Canvas to draw a simple line. This video is perfect for anyone starting their journey in web development or looking to understand the fundamentals of … Read more
“Drawing a Semi-Circle in JavaScript: HTML5 Canvas Tutorial! #JavaScriptBasics #HTML5Canvas #DrawingTutorial #CodingSkills” Unlock the secrets of drawing with JavaScript on the HTML5 Canvas! In this detailed tutorial, we’ll show you step-by-step how to draw a semi-circle using JavaScript commands. Whether you’re a beginner or looking to refine your coding and artistic abilities, this video is … Read more
“Create a Moving Rectangle Animation with JavaScript & HTML5! #JavaScriptTutorial #HTML5Canvas #Animation #WebDevelopment” YouTube Description: Discover how to bring your web pages to life with our latest tutorial on creating a moving rectangle animation using JavaScript and the HTML5 Canvas API. This video is perfect for beginners looking to get hands-on with interactive web development. … Read more