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
A university lecture for journalism students -- how to use the canvas element to add graphics and animation to Web pages. Updated April 2014. Basics for beginners. See also https://github.com/macloo/canvas
A university lecture for journalism students -- how to use the canvas element to add graphics and animation to Web pages. Updated April 2014. Basics for beginners. See also https://github.com/macloo/canvas
It can be difficult for users to understand and modify workflow procedures in their applications. The job lifecycle of workflow-driven applications may change based on some specific procedures. We know that people can memorize images, shapes, and colors more easily than raw data. Using Ext JS Draw package, we created a dynamic, easy to use, workflow diagram modeler. We delivered a distinct solution that overcomes the challenges our users encountered. With our modeler, users can drag and drop, resize, label, and connect workflow steps with minimal effort. This ensures that users can visualize and design workflows in a more natural and innovative way.
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.
This is the slide deck I used in a workshop about CSS animations, transitions and transforms. My students study Interactive Multimedia Design at Thomas More Mechelen. More info at http://www.weareimd.be
This presentation introduces developers to the functionality of the HTML5 canvas tag. It runs from getting started (slow start) to more comprehensive examples designed to be inspirational in nature. This presentation is not designed to make you an expert with canvas, but to introduce developers to the wealth of possibilities.
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018Codemotion
CSS siempre se ha considerado la parte menos controlable, complicada, mágica y en ocasiones algo aleatoria :). Houdini nos ofrece un conjunto de APIs y herramientas Javascript que nos dan la posibilidad de extender CSS para acceder al proceso de diseño y estilo del motor de renderizado del navegador. En el motor CSS existe una secuencia de procesos que con Houdini podremos modificar. Tenemos métodos como registerProperty, registerLayout o registerPaint que nos permiten programar nuestros propios módulos totalmente optimizados para que el CSS Engine los interprete de forma nativa.
Find out more presentations at https://madrid2018.codemotionworld.com/speakers/
Ember.js Tokyo event 2014/09/22 (English)Yuki Shimada
This is the slide shown at Ember.js Tokyo event.
http://emberjs.doorkeeper.jp/events/14856
(Japanese Version: http://www.slideshare.net/yukishimada1/emberjs-event-tokyo-ja-20140922 )
SVG vs Canvas - Showdown of the PaintersPhil Reither
A look at what SVG is, the similarities and differences to the HTML5 canvas element. Given as a lecture in the fh ooe in Hagenberg, Austria in December 2011.
It can be difficult for users to understand and modify workflow procedures in their applications. The job lifecycle of workflow-driven applications may change based on some specific procedures. We know that people can memorize images, shapes, and colors more easily than raw data. Using Ext JS Draw package, we created a dynamic, easy to use, workflow diagram modeler. We delivered a distinct solution that overcomes the challenges our users encountered. With our modeler, users can drag and drop, resize, label, and connect workflow steps with minimal effort. This ensures that users can visualize and design workflows in a more natural and innovative way.
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.
This is the slide deck I used in a workshop about CSS animations, transitions and transforms. My students study Interactive Multimedia Design at Thomas More Mechelen. More info at http://www.weareimd.be
This presentation introduces developers to the functionality of the HTML5 canvas tag. It runs from getting started (slow start) to more comprehensive examples designed to be inspirational in nature. This presentation is not designed to make you an expert with canvas, but to introduce developers to the wealth of possibilities.
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018Codemotion
CSS siempre se ha considerado la parte menos controlable, complicada, mágica y en ocasiones algo aleatoria :). Houdini nos ofrece un conjunto de APIs y herramientas Javascript que nos dan la posibilidad de extender CSS para acceder al proceso de diseño y estilo del motor de renderizado del navegador. En el motor CSS existe una secuencia de procesos que con Houdini podremos modificar. Tenemos métodos como registerProperty, registerLayout o registerPaint que nos permiten programar nuestros propios módulos totalmente optimizados para que el CSS Engine los interprete de forma nativa.
Find out more presentations at https://madrid2018.codemotionworld.com/speakers/
Ember.js Tokyo event 2014/09/22 (English)Yuki Shimada
This is the slide shown at Ember.js Tokyo event.
http://emberjs.doorkeeper.jp/events/14856
(Japanese Version: http://www.slideshare.net/yukishimada1/emberjs-event-tokyo-ja-20140922 )
SVG vs Canvas - Showdown of the PaintersPhil Reither
A look at what SVG is, the similarities and differences to the HTML5 canvas element. Given as a lecture in the fh ooe in Hagenberg, Austria in December 2011.
Before the arrival of HTML5 Canvas API it’s always a tough task to build complex graphs and 2D/3D designs in the website. Developers could only use drawing APIs all the way through plug-ins like SVG (Scalable Vector Graphics) and VML (vector Markup Language) with some specific web browsers like Internet Explorer. For example, to draw a simple diagonal line without a canvas element is easy, but it’s a quite difficult task if you don’t have a simple 2D drawing API at your clearance.
Drawing a Circle Three Ways: Generating Graphics for the WebCloudinary
Amy Cheng
Web Developer, New York Magazine
Drawing a Circle Three Ways: Generating Graphics for the Web
There are multiple ways to generate graphics for the web. In this talk, we’ll learn three ways create a circle: CSS, SVGs, the Canvas. Each approach has its advantages and disadvantages. Which one is best for mobile performance? Which one should I use to create visualizations based on real-time data? Which one is the best for personalized user interfaces?
We’ll answer these questions and explore how these technologies offer us possibilities of visual expressiveness on the web, across different form factors and platforms.
Writing a Space Shooter with HTML5 CanvasSteve Purkis
This talk reviews a Space Shooter game that I wrote to learn about HTML5 canvas. It covers:
* Basics of canvas 2D
* Overview of how the game is put together
* Some performance tips
First presented @ Ottawa JavaScript in September 2012.
Developing games for consoles as an indie in 2019David Voyles
I've given this talk several times across the world, and it's largely about the intricate parts of releasing a title in 2019. It covers everything from engines/tools, ESRB & PEGI certifications, and how to build a brand.
I gave this talk during Philly Code Camp 2018.2.
The resources mentioned can be found here: http://www.davevoyles.com/2018/02/11/getting-started-data-science-machine-learning-python/
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5David Voyles
The video for this talk can be found here:https://channel9.msdn.com/Blogs/raw-tech/Getting-started-with-Emscripten--Transpiling-C--C-to-JavaScript--HTML5
I cover how to transpile code from C/C++ to HTML5/JS using Emscripten, an open source compiler tool from Mozilla and Alon Zakai.
How to win a hackathon - Penn APps 2015David Voyles
I'll show you how I won hackathons at two Fortune 50 companies (Comcast & Microsoft), as well as point you towards a number of resources, such as free Azure passes, and GitHub repositories to assist you.
How to build and deploy an ASP.NET applicaton.
This entire series can be found here: http://www.davevoyles.com/slides-and-code-for-my-asp-net-presentation/
Running, improving & maintaining a site in the real worldDavid Voyles
How to build and deploy an ASP.NET applicaton. This talk covers how to scale your applications using Azure
This entire series can be found here: http://www.davevoyles.com/slides-and-code-for-my-asp-net-presentation/
Building web front ends using single page applicationsDavid Voyles
How to build and deploy an ASP.NET applicaton.
This entire series can be found here: http://www.davevoyles.com/slides-and-code-for-my-asp-net-presentation/
Web standards and Visual Studio web toolsDavid Voyles
How to build and deploy an ASP.NET applicaton.
This entire series can be found here: http://www.davevoyles.com/slides-and-code-for-my-asp-net-presentation/
Joe Healy - How to set up your DreamSpark accountDavid Voyles
Tech Evangelist Joe Healy (http://www.devfish.net/) put together an excellent slide deck on the benefits of being a publisher on Microsoft platforms, and how Microsoft is working with students.
Using prime[31] to connect your unity game to azure mobile servicesDavid Voyles
Using prime[31] to connect your unity game to azure mobile services. More info at my blog: http://davevoyles.azurewebsites.net/prime31-azure-plugin-win8-wp8-unity-games-part-3/
An Introdouction to Venture Capital and Microsoft VenturesDavid Voyles
A high level overview of the services that Microsoft Ventures provides, what they are looking for, and how you can apply.
Also includes what VC is, how to get started with it, and what VCs are looking for.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Advanced html5 diving into the canvas tag
1.
2.
3.
4.
5.
6.
7. A blank slate to draw graphs, game graphics, video, or
other visual images on the fly.”
8. • 2D drawing tool within all modern browsers
• No downloads (plugins) required!
• Openly developed by the WC3 (WWW consortium)
9. Introduced by Apple, as
part of WebKit in 2004, to
show the power of
desktop apps within their
Safari browser.
Now a standard!
10.
11.
12.
13.
14.
15.
16. <canvas id=“myCanvas" width="150" height="150"></canvas>
• Only 2 attributes: Width & Height
• Default values for width and height: 300px x 150px
17. Older browsers may not support the <canvas>
element
Therefore, we insert fallback text, just in case it won’t
display
<canvas id=“myChart" width="150" height="150">
Current version of IE: 11
</canvas>
18. var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here:
Hey, you need to update your browser!
}
19. The canvas is a two-dimensional grid.
The coordinate (0, 0) is at the upper-
left corner of the canvas.
Along the X-axis, values increase from
left to right.
Along the Y-axis, values increase from
top to bottom.
20. var canvas = document.getElementById(‘myCanvas');
var ctx = canvas.getContext('2d');
21.
22. var canvas = document.getElementById(“myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 25, 150, 100);
Parameters:
X: The x-coordinate of the upper-left corner of the rectangle
Y The y-coordinate of the upper-left corner of the rectangle
Width: The width of the rectangle, in pixels
Height: The height of the rectangle, in pixels
23.
24. •fillStyle: can be a CSS color, a pattern, or a gradient. (Default color is black)
•strokeStyle: like fillStyle, but used for lines
•fillRect( x, y, width, height) draws a rectangle filled with the current fill style.
•strokeRect(x, y, width, height) draws an rectangle w/ current stroke style. Only draws edges.
•clearRect( x, y, width, height) clears the pixels in the specified rectangle.
26. <canvas id="myCanvas" width=200 height=120></canvas>
var canvas = document.getElementById('myCanvas');
var ctxt = canvas.getContext('2d');
ctx.fillStyle = '#000000'; // set color to black
ctx.fillRect(0, 0, 200, 40); // draw (200x40 pixel) rectangle at (0,0
ctx.fillStyle = '#FF0000'; // set color to red
ctx.fillRect(0, 40, 200, 40); // draw (200x40 pixel) rectangle at (0,40)
ctx.fillStyle = '#FFCC00'; // set color to gold
ctx.fillRect(0, 80, 200, 40); // draw (200x40 pixel) rectangle at (0,80)
27.
28. • Scale(): Scales the current drawing, bigger or smaller
• Rotate(): Rotates current drawing
• Translate(): Moves the (0,0) position on the canvas
• Transform(): Replaces current transform matrix for current drawing
• setTransform(): Resets current transform matrix to the identity matrix, then runs
transform()
29.
30. <canvas id="myCanvas" width="300" height="200"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50, 20, 100, 50);
Save & Restore context
Save & Restore context (cont’d)
To calculate from degrees to radians: degrees * Math.PI/180
31. <canvas id="myCanvas" width=“300" height=“300"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 100, 30); // draw first rectangle
ctx.scale(2,2); // 2x width, 2x height
ctx.strokeRect(5, 5, 100, 30); // draw second triangle
35. Three steps are required:
1. Begin the path – beginPath()
2. Move the points – moveTo() or lineTo()
3. Stroke (outline) / Fill the path – stroke() or fill()
4. *Close the path – closePath()
*Note: When you call fill(), any open shapes are closed automatically, so you
don’t need to call closePath(). This is not true when you use stroke(), though.
36. Moves the “pencil” to the x, y coordinates
Doesn’t draw anything, but becomes part of the path
Think of it as lifting a pencil, then places it at this spot
38. var canvas = document.getElementById(‘myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath(); // starts drawing
ctx.moveTo(75,50); // First point (left)
ctx.lineTo(100,75); // Bottom point
ctx.lineTo(100,25); // Top point
ctx.fill(); // black is default
}
39.
40. Unlike text on a webpage, there is no box model, so CSS layout
techniques are not available, such as:
- float, margin, padding, word wrap
Available attributes:
• font (style, font variant, weight, size, line height, family)
• textAlign (start, end, left, right, center)
• TextBaseline (top, hanging, middle, alphabetic, ideographic, bottom)
41. <canvas id=“myCanvas" width=“150” height=“100”></canvas>
var canvas = document.getElementById ('myCanvas'); // access the canvas object
var ctx = canvas.getContext ('2d'); // access the canvas context
ctx.fillRect (5,5,140,50); // fill rectangle with black color
ctx.fillStyle = 'red'; // set text color to 'red'
ctx.font = '40pt Arial'; // define the CSS font for writing text
ctx.fillText ('Text',1 0,50); // write the text 'Text‘
42.
43. var canvas =document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,100);
Smooth transition between two colors
You can have more than one <canvas> element on the same page. Each canvas will show up in the DOM, and each canvas maintains its own state. If you give each canvas an id attribute, you can access them just like any other element.
Scripts can also check for support programatically by simply testing for the presence of the getContext() method.
Default color is black
The first line retrieves the DOM node for the <canvas> element by calling the document.getElementById() method. Once you have the element node, you can access the drawing context using its getContext() method.