Intro to HTML5 Canvas

Jun 15, 20114 likes1,987 views

Brief introduction to HTML5 Canvas. Libs: https://github.com/bebraw/jswiki/wiki (multimedia, graphics). Demos: http://jsdo.it/bebraw/codes

Gonna Talk About These
Topics You Betcha
Canvas (Overview)

Canvas 2D Context (The Beefcake)

Canvas Tricks (For Fun and Proﬁt)

Canvas Demos (To Recap Concepts Discussed)

http://dev.w3.org/html5/2dcontext/

Just Google it. :)

Deﬁnition

Immediate-mode API and associated utility methods
for drawing two-dimensional vector graphics
to a raster drawing area.

Draw and forget API and utils for 2D drawing.

Markup

<canvas></canvas>

<canvas width="800" height="600"></canvas>

<canvas width="800" height="600">No canvas for you!</canvas>

Element Access

Attributes: width, height

Method: getContext (for drawing), toDataURL (for
saving)

Get Some Context

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

var ctx = canvas.getContext("2d");

Context Functionality
It's a state machine

Read-only ref back to canvas (attr)

save/restore + ops

Ops: transformations, compositing, colors and styles,
line caps/joins, shadows, rects, paths, text, drawing
images, pixel manipulation + misc. crud I won't cover

Context for Dummies

1. Set some states (transformation, color, ie.)

2. Draw (lines, whatnot)

3. ???

4. Proﬁt

Transformed Context
(0, 0) x

ctx.scale(x, y)
ctx.rotate(rad)
ctx.translate(x, y)
y ctx.transform/setTransform(a,b,c,d,e,f) (set resets)

Compositing
ctx.globalAlpha = 0.38;

ctx.globalCompositeOperation = "source-over";

Colors and Styles - stroke/
ﬁll
ctx.strokeStyle = "black";

ctx.ﬁllStyle = "yellow";

Colors and Styles -
Gradients
ctx.createLinearGradient(x0,y0,x1,y1)

ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)
ctx.addColorStop(oﬀset, color);

Colors and Styles - Patterns
ctx.createPattern(catImg, 'repeat-x');

Line Caps/Joins

ctx.lineWidth = 12;
ctx.lineCap = "square";
ctx.lineJoin = "miter";
ctx.miterLimit = 10;

Shadows

ctx.shadowOﬀsetX = 5;
ctx.shadowOﬀsetY = 5;
ctx.shadowBlur = 3;
ctx.shadowColor = 'grey';

Rectangles
ctx.clearRect/ﬁllRect/strokeRect(x,y,w,h)

Paths
ctx.beginPath();

ctx.moveTo(x, y); // initial pos

// deﬁne curve
ctx.lineTo/quadraticCurveTo/bezierCurveTo/
arcTo/arc/rect
...

ctx.closePath();

ctx.ﬁll/stroke/clip();

Text

ctx.font = "24px sans-serif ";
ctx.textAlign = "center";

ctx.ﬁllText/strokeText(text,x,y,maxWidth);

Drawing Images
ctx.drawImage(img/canvas/video, lots of alternatives);

Supports compositing! Use this to your advantage.

Pixel Manipulation
ctx.createImageData/getImageData/putImageData
var data = ctx.getImageData(0, 0, w, h);

var realData = data.data;
for(var y = 0, pos = 0; y < h; y++) {
for(var x = 0; x < w; x++, pos+=4) {
realData[pos + 2] *= 0.5; // modify Blue channel
}
}
data.data = realData;

Friggin' slow! Avoid if possible. Optimize usage.

Blurred Lines

Basic idea: Use line shadow, oﬀset actual line
so that it isn't visible.

Multiple Layers

Basic idea: CSS z-index + absolute positioning.

Erasing

Basic idea: Use destination-out compositing op.

CSS Fun

Basic idea: Play around with CSS opacity
and transformations (incurs perf penalty).

Canvas Demos
To recap concepts discussed

The document provides an overview of HTML5 Canvas: - Canvas is a 2D drawing platform that uses JavaScript and HTML without plugins, originally created by Apple and now developed as a W3C specification. - Unlike SVG which uses separate DOM objects, Canvas is bitmap-based where everything is drawn as a single flat picture. - The document outlines how to get started with Canvas including setting dimensions, accessing the 2D rendering context, and using methods to draw basic and complex shapes with paths, text, and images. - It discusses using Canvas for animation, interactions, and pixel manipulation, and its potential to replace Flash in the future.

Introduction to HTML5 CanvasMindy McAdams

HTML5 CanvasRobyn Overstreet

- HTML5 Canvas allows for dynamic drawing and animating directly in HTML using JavaScript scripting. It can be used to draw shapes, images, text and respond to user input like mouse clicks. - The canvas element creates a grid that allows positioning images and objects by x and y coordinates. Basic drawing functions include lines, rectangles, curves and filling areas with colors. - Transformations like translation and rotation can change the orientation of drawings on the canvas. The drawing state can be saved and restored to return to previous settings. - Images can be drawn and manipulated at the pixel level by accessing image data. Animation is achieved by redrawing the canvas repeatedly with small changes. - Data from sources like JSON can be

HTML 5 Canvas & SVGOfir's Fridman

The document compares and contrasts the Canvas and SVG elements in HTML. Canvas uses JavaScript to draw graphics via code and is rendered pixel by pixel, while SVG uses XML to draw graphics as scalable vector shapes. Canvas is better for games, charts, and advertising due to its faster rendering, while SVG is better for icons, logos, and charts due to its scalability and support for event handlers. Several common drawing methods like rectangles, circles, paths, and text are demonstrated for both Canvas and SVG.

HTML 5_CanvasVishakha Vaidya

Canvas - HTML 5Jaeni Sahuri

HTML5 Canvas - The Future of Graphics on the WebRobin Hawkes

Css5 canvasVadim Spiridenko

How to make a video gamedandylion13

The document provides instructions and examples for making games using HTML5 canvas and JavaScript. It discusses using canvas to draw basic shapes and images. It introduces the concept of sprites as reusable drawing components and provides an example sprite class. It demonstrates how to create a game loop to continuously update and render sprites to animate them. It also provides an example of making a sprite respond to keyboard input to allow user control. The document serves as a tutorial for building the core components of a simple HTML5 canvas game.

Exploring CanvasKevin Hoyt

Stupid Canvas Tricksdeanhudson

This document provides tips and tricks for using the Canvas API, with a focus on game programming and bitmaps. It discusses setting up an animation loop using requestAnimationFrame, caching techniques like double buffering to improve performance, and manipulating pixel data directly using ImageData to implement features like hit detection and image filters. The document encourages profiling code and considers challenges in testing Canvas code.

Exploring CanvasKevin Hoyt

The document provides an overview of using the HTML5 canvas element to draw graphics and animations. It covers topics like rendering contexts, paths, styles, gradients, text, shapes, mouse/touch interaction, animation, and libraries. Code examples demonstrate how to draw basic shapes, handle user input, interpolate lines, add gradients, render to canvas, and more. The document is a tutorial for learning the capabilities of the canvas element.

The Canvas TagDave Ross

Android Vector DrawablePhearum THANN

SVGo workshopAnthony Starks

5 tips for your HTML5 gamesErnesto Jiménez

The document provides 5 tips for optimizing HTML5 game performance: 1. Use frame buffering to avoid screen flickering by drawing to an off-screen canvas before copying to the visible one 2. You don't always need a game loop which can be expensive; consider alternatives for simple games 3. Drawing operations like getImageData and putImageData are expensive so use them sparingly 4. Large fill operations are costly compared to smaller ones or plain colors 5. Consider using multiple smaller canvases instead of one large one to split work across frames

Android 2D Drawing and Animation FrameworkJussi Pohjolainen

HTML5 Canvas - Let's Draw!Phil Reither

Getting Visual with Ruby ProcessingRichard LeBer

Interactive GraphicsBlazing Cloud

Leaving Flatland: getting started with WebGLgerbille

WebGL is a JavaScript API for rendering interactive 3D graphics within any compatible web browser without the use of plug-ins. It can be used for data visualization, creative coding, 3D modeling, games, and more. WebGL works by using JavaScript to interface with the GPU through WebGL APIs to run GLSL shaders that render 3D scenes. To get started, one needs to choose a WebGL library like Three.js, add a <canvas> element, and get the WebGL context. Sample code is provided to render a 3D model by loading geometry, adding lights and materials, and animating the scene render.

Prototype UI IntroJuriy Zaytsev

Willustrator2da

The Web map stack on DjangoPaul Smith

The document discusses the web mapping stack in Django. It provides an example application called "Your Political Footprint" that allows users to geocode an address and see the congressional district. It describes using GeoDjango with PostGIS to store spatial data and Mapnik to render map tiles. It also covers tile caching with TileCache or pre-rendering tiles and serving them with Nginx. Clustering algorithms are presented to group points on a map.

Interactive Graphics using Javascript, HTML5 and CSS3Lee Lundrigan

This document provides an overview of interactive graphics using Javascript, HTML5 and CSS3. It introduces the speaker and covers topics like animation, interaction, sound, keyboard movement and collision detection. Code snippets and examples are provided to demonstrate concepts like animation using setInterval, coordinate systems, and playing sound. Labs are also outlined to build simple animations and games.

Kotlin MulletsJames Ward

Ever since we broke apart the front and back-end of our systems, we’ve longed to partially reunite them with a shared language. The benefits of code reuse and shared tooling are compelling but is this nirvana possible? In this session we will explore building both the front (mobile and web) and back-end of an application with a shared Kotlin codebase. You will learn how to setup the build, share code, and deploy the back-end as a serverless app.

UIWebViewでつくるUIcocopon

Html5 Canvas Drawing and AnimationMindfire Solutions

This document discusses HTML canvas drawing and animation. It covers topics like getting a canvas reference, the canvas API, drawing shapes and text, applying transformations, using paths, gradients and patterns, handling events, and animating canvas content using requestAnimationFrame. The document provides details on various canvas methods, properties, and techniques for 2D drawing and basic animation.

SVGo: a Go Library for SVG generationAnthony Starks

More Related Content

What's hot (20)

Css5 canvasVadim Spiridenko

How to make a video gamedandylion13

Exploring CanvasKevin Hoyt

Stupid Canvas Tricksdeanhudson

Exploring CanvasKevin Hoyt

The Canvas TagDave Ross

Android Vector DrawablePhearum THANN

SVGo workshopAnthony Starks

5 tips for your HTML5 gamesErnesto Jiménez

Android 2D Drawing and Animation FrameworkJussi Pohjolainen

HTML5 Canvas - Let's Draw!Phil Reither

Getting Visual with Ruby ProcessingRichard LeBer

Interactive GraphicsBlazing Cloud

Leaving Flatland: getting started with WebGLgerbille

Prototype UI IntroJuriy Zaytsev

Willustrator2da

The Web map stack on DjangoPaul Smith

Interactive Graphics using Javascript, HTML5 and CSS3Lee Lundrigan

Kotlin MulletsJames Ward

UIWebViewでつくるUIcocopon

Css5 canvasVadim Spiridenko

How to make a video gamedandylion13

Exploring CanvasKevin Hoyt

Stupid Canvas Tricksdeanhudson

Exploring CanvasKevin Hoyt

The Canvas TagDave Ross

Android Vector DrawablePhearum THANN

SVGo workshopAnthony Starks

5 tips for your HTML5 gamesErnesto Jiménez

Android 2D Drawing and Animation FrameworkJussi Pohjolainen

HTML5 Canvas - Let's Draw!Phil Reither

Getting Visual with Ruby ProcessingRichard LeBer

Interactive GraphicsBlazing Cloud

Leaving Flatland: getting started with WebGLgerbille

Prototype UI IntroJuriy Zaytsev

Willustrator2da

The Web map stack on DjangoPaul Smith

Interactive Graphics using Javascript, HTML5 and CSS3Lee Lundrigan

Kotlin MulletsJames Ward

UIWebViewでつくるUIcocopon

Similar to Intro to HTML5 Canvas (20)

Html5 Canvas Drawing and AnimationMindfire Solutions

SVGo: a Go Library for SVG generationAnthony Starks

Google I/O 2013 - Android Graphics PerformanceDouO

Introduction to d3js (and SVG)zahid-mian

The document provides an overview of Scalable Vector Graphics (SVG) and the D3.js library for manipulating SVG graphics. It discusses basic SVG shapes and paths that can be used to create visualizations like bar charts. It then demonstrates how to generate SVG elements like rectangles and circles using D3 selections and data binding. Transitions and interactive elements are also covered. Examples are provided to illustrate D3 concepts like entering new data, updating existing elements, and exiting stale elements from the DOM.

How to build a html5 websites.v1Bitla Software

CanvasDmitry Baranovskiy

Writing a Space Shooter with HTML5 CanvasSteve Purkis

introduction of HTML canvas and styles .pptxhannahroseline2

Visualization of Big Data in Web AppsEPAM

Advanced html5 diving into the canvas tagDavid Voyles

The document discusses the HTML5 <canvas> element, which allows for dynamic drawing directly onto the webpage. Some key points: - The <canvas> element is a 2D drawing surface that works within modern browsers without plugins. It can be used for graphics, games, charts, and more. - Common uses of the <canvas> include drawing shapes, text, images and applying transformations like scaling, rotation and translation. - The <canvas> uses a JavaScript API and context to draw onto the element programmatically rather than with CSS. Common methods include fillRect(), strokeRect(), beginPath() and more. - Gradients, images, and text can all be rendered onto the

HTML5 Canvas - Basics.pptxAhmadAbba6

This document provides an introduction to HTML5 Canvas and describes some of its key drawing capabilities. It explains that the <canvas> element is used to draw graphics via scripting, usually with JavaScript. It then outlines several methods for drawing paths, boxes, circles, text, and images on the canvas. It also discusses using gradients, setting the coordinate system, and interacting with canvas elements through events.

Better d3 charts with tddMarcos Iglesias

When I first started out with D3.js 2 years ago, I built things the same way, customising examples and although worked, I was never proud of my code. The chaining of methods makes the graphs concise, but costs a lot in cognitive overload and maintainability. Building this way is painful to modify, reuse or even to understand once you sit back down after lunch! I had a huge revelation when I discovered the Reusable API (a modular structure to create and reuse d3 elements) and my code was elevated to even higher levels with Test Driven Development. In this session I'll walk you through my journey toward beautiful, maintainable D3 graphs with step by step examples of refactoring crufty code to be shiny and new and testable. By the end of the talk you too will know how to build decoupled, composable, encapsulated and consistent D3 graphs and be proud of your code again!

IE9에서 HTML5 개발하기Reagan Hwang

Scmad Chapter06Marcel Caraciolo

The document discusses the user interface capabilities in MIDP, including custom items which allow custom rendering and input handling, and the canvas API which provides low-level graphics and event handling capabilities. It describes the key methods and features of custom items and the canvas, such as painting, sizing, and handling input events from touchscreens and keyboards. Examples are provided and future topics are outlined.

Rotoscope inthebrowserppt billynimbleltd

This document discusses creating a web-based rotoscoping tool using HTML5 canvas. It proposes allowing users to place shapes over video frames and edit them to create light saber-like effects. Key features would include acquiring video, drawing closed shapes frame-by-frame, reviewing the output, and exporting results. Technical approaches covered include using canvas drawings over video playback, saving frame data to localStorage, and potential improvements like a database backend.

Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Codemotion

The way that banner is rendered is really bland. That animation performance is lackluster to say the least. Maybe you're still unsatisfied with grid. CSS has always suffered from a slow-paced evolution but it's probably coming to an end. Houdini is a project that aims to expose the internals of CSS engines to developers, in order to create new and performant ways to extend CSS. We'll see the current state-of-the-art and some neat examples, to conclude with a glance to what the future holds for us.

CanvasGanesh Gembali

Canvas allows for pixel-level drawing and animation capabilities within HTML5. It provides an API for rendering graphics on a <canvas> element using JavaScript. Key features include drawing basic shapes, applying styles/colors, image manipulation, and transformations. Animations can be created by clearing and redrawing the canvas at intervals or on timeouts. Canvas is optimized for raster graphics with full pixel control, while SVG is better suited for vector/scalable shapes.

CanvasGanesh Gembali

Canvas allows for pixel-level drawing and animation capabilities within HTML5. It provides an API for rendering graphics to the document using JavaScript. Key features include drawing basic shapes, applying styles/colors, image manipulation, and transformations. Animation can be achieved by clearing and redrawing the canvas at intervals or on timeouts. Canvas is best for raster graphics/pixel manipulation while SVG is better for vector/resolution independent graphics.

Professional reports with SVGSpeedPartner GmbH

This document discusses using SVG (Scalable Vector Graphics) for generating professional reports with PHP. It provides an overview of SVG, support for SVG in browsers and tools, and PHP libraries for working with SVG, including PEAR::XML_SVG for building SVG documents programmatically, and PEAR::Image_Canvas and PEAR::Image_Graph for generating charts and graphs in SVG format. Examples of code snippets are provided to demonstrate how to create simple SVG charts and graphs using these PHP libraries.

Html5 Canvas Drawing and AnimationMindfire Solutions

SVGo: a Go Library for SVG generationAnthony Starks

Google I/O 2013 - Android Graphics PerformanceDouO

Introduction to d3js (and SVG)zahid-mian

How to build a html5 websites.v1Bitla Software

CanvasDmitry Baranovskiy

Writing a Space Shooter with HTML5 CanvasSteve Purkis

introduction of HTML canvas and styles .pptxhannahroseline2

Visualization of Big Data in Web AppsEPAM

Advanced html5 diving into the canvas tagDavid Voyles

HTML5 Canvas - Basics.pptxAhmadAbba6

Better d3 charts with tddMarcos Iglesias

IE9에서 HTML5 개발하기Reagan Hwang

Scmad Chapter06Marcel Caraciolo

Rotoscope inthebrowserppt billynimbleltd

Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Codemotion

CanvasGanesh Gembali

Professional reports with SVGSpeedPartner GmbH

More from Juho Vepsäläinen (13)

Web application development - The past, the present, the futureJuho Vepsäläinen

ECMAScript - From an idea to a major standardJuho Vepsäläinen

Quick introduction to QwikJuho Vepsäläinen

fooConf - JavaScript frameworks of tomorrowJuho Vepsäläinen

JavaScript frameworks of tomorrowJuho Vepsäläinen

The future is mostly staticJuho Vepsäläinen

Web application development - The past, the present, the futureJuho Vepsäläinen

The future is mostly staticJuho Vepsäläinen

In my talk, I argue that the future of web development is mostly static. In other words, we're going back to the stone age of web development but with a modern twist. Expect to learn why and how this will happen. It's time to go back to the basics. You can find the latest version at https://www.slideshare.net/bebraw/the-future-is-mostly-static-253901205 with a few additions.

Survive JavaScript - Strategies and TricksJuho Vepsäläinen

Getting started with JavaScript can be somewhat challenging. Especially given how fast the scenery changes. In this presentation I provide a general view of the state of the art. Besides this I go through various JavaScript related tricks that I've found useful in practice. survivejs.com is a companion site of the presentation and goes on further detail in various topics. The original presentation was given at AgileJkl, a local agile conference held in Central Finland.

SpeccerJuho Vepsäläinen

bongaus.fi - Spotting Service Powered by DjangoJuho Vepsäläinen

Bootstrap vs. SkeletonJuho Vepsäläinen

Static Websites - The Final FrontierJuho Vepsäläinen

Web application development - The past, the present, the futureJuho Vepsäläinen

ECMAScript - From an idea to a major standardJuho Vepsäläinen

Quick introduction to QwikJuho Vepsäläinen

fooConf - JavaScript frameworks of tomorrowJuho Vepsäläinen

JavaScript frameworks of tomorrowJuho Vepsäläinen

The future is mostly staticJuho Vepsäläinen

Web application development - The past, the present, the futureJuho Vepsäläinen

The future is mostly staticJuho Vepsäläinen

Survive JavaScript - Strategies and TricksJuho Vepsäläinen

SpeccerJuho Vepsäläinen

bongaus.fi - Spotting Service Powered by DjangoJuho Vepsäläinen

Bootstrap vs. SkeletonJuho Vepsäläinen

Static Websites - The Final FrontierJuho Vepsäläinen

Recently uploaded (20)

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

tecnologias de las primeras civilizaciones.pdffjgm517

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, presentation slides, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

I started my online journey with several hosting services before stumbling upon Ai EngineHost. At first, the idea of paying one fee and getting lifetime access seemed too good to pass up. The platform is built on reliable US-based servers, ensuring your projects run at high speeds and remain safe. Let me take you step by step through its benefits and features as I explain why this hosting solution is a perfect fit for digital entrepreneurs.

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

At InData Labs, we have been keeping an ear to the ground, looking out for AI-enabled digital transformation trends coming our way in 2025. Our report will provide a look into the technology landscape of the future, including: -Artificial Intelligence Market Overview -Strategies for AI Adoption in 2025 -Anticipated drivers of AI adoption and transformative technologies -Benefits of AI and Big data for your business -Tips on how to prepare your business for innovation -AI and data privacy: Strategies for securing data privacy in AI models, etc. Download your free copy nowand implement the key findings to improve your business.

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Most consumers believe they’re making informed decisions about their personal data—adjusting privacy settings, blocking trackers, and opting out where they can. However, our new research reveals that while awareness is high, taking meaningful action is still lacking. On the corporate side, many organizations report strong policies for managing third-party data and consumer consent yet fall short when it comes to consistency, accountability and transparency. This session will explore the research findings from TrustArc’s Privacy Pulse Survey, examining consumer attitudes toward personal data collection and practical suggestions for corporate practices around purchasing third-party data. Attendees will learn: - Consumer awareness around data brokers and what consumers are doing to limit data collection - How businesses assess third-party vendors and their consent management operations - Where business preparedness needs improvement - What these trends mean for the future of privacy governance and public trust This discussion is essential for privacy, risk, and compliance professionals who want to ground their strategies in current data and prepare for what’s next in the privacy landscape.

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Join this UiPath Community Berlin meetup to explore the Orchestrator API, Swagger interface, and the Test Manager API. Learn how to leverage these tools to streamline automation, enhance testing, and integrate more efficiently with UiPath. Perfect for developers, testers, and automation enthusiasts! 📕 Agenda Welcome & Introductions Orchestrator API Overview Exploring the Swagger Interface Test Manager API Highlights Streamlining Automation & Testing with APIs (Demo) Q&A and Open Discussion Perfect for developers, testers, and automation enthusiasts! 👉 Join our UiPath Community Berlin chapter: https://community.uipath.com/berlin/ This session streamed live on April 29, 2025, 18:00 CET. Check out all our upcoming UiPath Community sessions at https://community.uipath.com/events/.

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Artificial intelligence is changing how businesses operate. Companies are using AI agents to automate tasks, reduce time spent on repetitive work, and focus more on high-value activities. Noah Loul, an AI strategist and entrepreneur, has helped dozens of companies streamline their operations using smart automation. He believes AI agents aren't just tools—they're workers that take on repeatable tasks so your human team can focus on what matters. If you want to reduce time waste and increase output, AI agents are the next move.

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-and-managing-multiuser-environments/ HCL Nomad Web is heralded as the next generation of the HCL Notes client, offering numerous advantages such as eliminating the need for packaging, distribution, and installation. Nomad Web client upgrades will be installed “automatically” in the background. This significantly reduces the administrative footprint compared to traditional HCL Notes clients. However, troubleshooting issues in Nomad Web present unique challenges compared to the Notes client. Join Christoph and Marc as they demonstrate how to simplify the troubleshooting process in HCL Nomad Web, ensuring a smoother and more efficient user experience. In this webinar, we will explore effective strategies for diagnosing and resolving common problems in HCL Nomad Web, including - Accessing the console - Locating and interpreting log files - Accessing the data folder within the browser’s cache (using OPFS) - Understand the difference between single- and multi-user scenarios - Utilizing Client Clocking

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Toradex brings robust Linux support to SMARC (Smart Mobility Architecture), ensuring high performance and long-term reliability for embedded applications. Here’s how: • Optimized Torizon OS & Yocto Support – Toradex provides Torizon OS, a Debian-based easy-to-use platform, and Yocto BSPs for customized Linux images on SMARC modules. • Seamless Integration with i.MX 8M Plus and i.MX 95 – Toradex SMARC solutions leverage NXP’s i.MX 8 M Plus and i.MX 95 SoCs, delivering power efficiency and AI-ready performance. • Secure and Reliable – With Secure Boot, over-the-air (OTA) updates, and LTS kernel support, Toradex ensures industrial-grade security and longevity. • Containerized Workflows for AI & IoT – Support for Docker, ROS, and real-time Linux enables scalable AI, ML, and IoT applications. • Strong Ecosystem & Developer Support – Toradex offers comprehensive documentation, developer tools, and dedicated support, accelerating time-to-market. With Toradex’s Linux support for SMARC, developers get a scalable, secure, and high-performance solution for industrial, medical, and AI-driven applications. Do you have a specific project or application in mind where you're considering SMARC? We can help with Free Compatibility Check and help you with quick time-to-market For more information: https://www.toradex.com/computer-on-modules/smarc-arm-family

Procurement Insights Cost To Value Guide.pptxJon Hansen

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

tecnologias de las primeras civilizaciones.pdffjgm517

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

AI and Data Privacy in 2025: Global TrendsInData Labs

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Procurement Insights Cost To Value Guide.pptxJon Hansen

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

Intro to HTML5 Canvas

1. Intro to HTML5 Canvas Juho Vepsäläinen

2. Gonna Talk About These Topics You Betcha Canvas (Overview) Canvas 2D Context (The Beefcake) Canvas Tricks (For Fun and Proﬁt) Canvas Demos (To Recap Concepts Discussed)

3. Canvas Overview

4. http://dev.w3.org/html5/2dcontext/ Just Google it. :)

5. Deﬁnition Immediate-mode API and associated utility methods for drawing two-dimensional vector graphics to a raster drawing area. Draw and forget API and utils for 2D drawing.

6. Markup <canvas></canvas> <canvas width="800" height="600"></canvas> <canvas width="800" height="600">No canvas for you!</canvas>

7. Element Access Attributes: width, height Method: getContext (for drawing), toDataURL (for saving)

8. Show some apps and libs now.

9. Canvas 2D Context The Beefcake

10. Get Some Context var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");

11. Context Functionality It's a state machine Read-only ref back to canvas (attr) save/restore + ops Ops: transformations, compositing, colors and styles, line caps/joins, shadows, rects, paths, text, drawing images, pixel manipulation + misc. crud I won't cover

12. Context for Dummies 1. Set some states (transformation, color, ie.) 2. Draw (lines, whatnot) 3. ??? 4. Proﬁt

13. Default Context (0, 0) x y

14. Transformed Context (0, 0) x ctx.scale(x, y) ctx.rotate(rad) ctx.translate(x, y) y ctx.transform/setTransform(a,b,c,d,e,f) (set resets)

15. Compositing ctx.globalAlpha = 0.38; ctx.globalCompositeOperation = "source-over";

16. Colors and Styles - stroke/ ﬁll ctx.strokeStyle = "black"; ctx.ﬁllStyle = "yellow";

17. Colors and Styles - Gradients ctx.createLinearGradient(x0,y0,x1,y1) ctx.createRadialGradient(x0,y0,r0,x1,y1,r1) ctx.addColorStop(oﬀset, color);

18. Colors and Styles - Patterns ctx.createPattern(catImg, 'repeat-x');

19. Line Caps/Joins ctx.lineWidth = 12; ctx.lineCap = "square"; ctx.lineJoin = "miter"; ctx.miterLimit = 10;

20. Shadows ctx.shadowOﬀsetX = 5; ctx.shadowOﬀsetY = 5; ctx.shadowBlur = 3; ctx.shadowColor = 'grey';

21. Rectangles ctx.clearRect/ﬁllRect/strokeRect(x,y,w,h)

22. Paths ctx.beginPath(); ctx.moveTo(x, y); // initial pos // deﬁne curve ctx.lineTo/quadraticCurveTo/bezierCurveTo/ arcTo/arc/rect ... ctx.closePath(); ctx.ﬁll/stroke/clip();

23. Text ctx.font = "24px sans-serif "; ctx.textAlign = "center"; ctx.ﬁllText/strokeText(text,x,y,maxWidth);

24. Drawing Images ctx.drawImage(img/canvas/video, lots of alternatives); Supports compositing! Use this to your advantage.

25. Pixel Manipulation ctx.createImageData/getImageData/putImageData var data = ctx.getImageData(0, 0, w, h); var realData = data.data; for(var y = 0, pos = 0; y < h; y++) { for(var x = 0; x < w; x++, pos+=4) { realData[pos + 2] *= 0.5; // modify Blue channel } } data.data = realData; Friggin' slow! Avoid if possible. Optimize usage.

26. Canvas Tricks For Fun and Proﬁt

27. Blurred Lines Basic idea: Use line shadow, oﬀset actual line so that it isn't visible.

28. Multiple Layers Basic idea: CSS z-index + absolute positioning.

29. Erasing Basic idea: Use destination-out compositing op.

30. CSS Fun Basic idea: Play around with CSS opacity and transformations (incurs perf penalty).

31. Canvas Demos To recap concepts discussed

32. Demo time.

Intro to HTML5 Canvas

Recommended

More Related Content

What's hot (20)

Similar to Intro to HTML5 Canvas (20)

More from Juho Vepsäläinen (13)

Recently uploaded (20)

Intro to HTML5 Canvas