SlideShare a Scribd company logo
1 of 63
Download to read offline
Canvas
                                L5 FT W!
                            H TM
Web Directions
               South 2009
   Dmitry Barano
                  vskiy
“The canvas element represents
 a!resolution-dependent bitmap
  canvas, which can be used for
 rendering graphs, game graphics,
or other visual images on the fly”
                     HTML 5 Specification
Canvas
Teenager of web
  technologies
Canvas
Canvas
Awesome
  What is
 Awesome?   !
Canvas
Draw!
You can draw!
api
API is small & simple
HTML5
 HTML 5
HTML5
 HTML5
Canvas
Canvas
Canvas
Howto?
 How to…
Canvas
JavaScript
Context
  Context
var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");
context.save();
context.restore();
context.scale(x, y);
context.rotate(angle);
context.translate(x, y);
context.transform(m11, m12, m21, m22, dx, dy);
context.setTransform(m11, m12, m21, m22, dx, dy);
var a = context.globalAlpha;
context.globalAlpha = a * 0.5;

var b = context.globalCompositeOperation;
context.globalCompositeOperation = "xor";
context.strokeStyle = "#fc0";
context.fillStyle = "#000";

var gradient = context.createLinearGradient(x1, y1, x2,
y2);
// or
var gradient = context.createRadialGradient(x1, y1, r1,
x2, y2, r2);
gradient.addColorStop(0 / 6, "red");
gradient.addColorStop(1 / 6, "orange");
gradient.addColorStop(2 / 6, "yellow");
gradient.addColorStop(3 / 6, "green");
gradient.addColorStop(4 / 6, "blue");
gradient.addColorStop(5 / 6, "navy");
gradient.addColorStop(6 / 6, "purple");
context.fillStyle = gradient;
context.lineWidth = 2;
context.lineCap = "round";
context.lineJoin = "bevel";
context.miterLimit = 5;

context.shadowColor = "#000";
context.shadowOffsetX = 0;
context.shadowOffsetY = 3;
context.shadowBlur = 7;
primiti
  Primitives
               ve
context.clearRect(x, y, width, height);
context.fillRect(x, y, width, height);
context.strokeRect(x, y, width, height);
paths
 Paths
context.beginPath();
context.closePath();

context.moveTo(x, y);
context.lineTo(x, y);
context.quadraticCurveTo(cpx, cpy, x, y);
context.bezierCurveTo(c1x, c1y, c2x, c2y, x, y);
context.arcTo(x1, y1, x2, y2, radius);
context.arc(x, y, radius, startAngle, endAngle,
anticlockwise);
context.rect(x, y, width, height);

context.fill();
context.stroke();
context.clip();
context.isPointInPath(x, y);
text
 Text
context.font = 'italic 400 12px/2 Palatino, »
Georgia, serif';
context.textAlign = "center";
context.textBaseline = "middle";

context.fillText("Web Directions", 100, 120);
context.strokeText("Canvas FTW", 100, 150, 140);

var metrics = context.measureText("How wide is »
this text?"),
    width = metrics.width;
images
  Images
var image = new Image;
image.onload = function () {
    context.drawImage(image, x, y);
    // or
    context.drawImage(image, x, y, w, h);
    // or
    context.drawImage(image, sx, sy, sw, sh,
                       x, y, w, h);
};
image.src = "graffiti.jpg";
sy                y
var image = new Image;
image.onload = sx
                function () {
                           sh      x        h
    context.drawImage(image, x, y);
    // or
                     sw               w
    context.drawImage(image, x, y, w, h);
    // or
    context.drawImage(image, sx, sy, sw, sh,
                        x, y, w, h);
};
image.src = "graffiti.jpg";
pixels
Pixel Pushing
var data = context.createImageData(w, h);
// or
var data = context.createImageData(old_data);
var data = context.getImageData(x, y, w, h);
context.putImageData(data, dx, dy);
// or
context.putImageData(data, dx, dy, x, y, w, h);
var data = {
    width: 100,
    height: 100,
    data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]
};
var data = {
    width: 100,
    height: 100,
    data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]
};
var data = {
    width: 100,
    height: 100,
    data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]
};
                        R G B A
not!
What is not
Awesome?
Canvas
ugly
API is ugly
1by1
Setting attributes one by one
context.lineWidth = 2;
context.lineCap = "round";
context.lineJoin = "bevel";
context.miterLimit = 5;

context.shadowColor = "#000";
context.shadowOffsetX = 0;
context.shadowOffsetY = 3;
context.shadowBlur = 7;
context.setAttr({
    lineWidth: 2,
    lineCap: "round",
    lineJoin: "bevel",
    miterLimit: 5,
    shadowColor: "#000",
    shadowOffsetX: 0,
    shadowOffsetY: 3,
    shadowBlur: 7
});
pain!
Coding paths is painful
context.beginPath();
context.moveTo(x, y);
context.lineTo(x, y);
context.quadraticCurveTo(cpx, cpy, x, y);
context.bezierCurveTo(c1x, c1y, c2x, c2y, x, y);
context.arcTo(x1, y1, x2, y2, radius);
context.arc(x, y, radius, startAngle, endAngle,
anticlockwise);
context.rect(x, y, width, height);
context.closePath();
context.fill();
context.beginPath()
    .moveTo(x, y)
    .lineTo(x, y)
    .quadraticCurveTo(cpx, cpy, x, y)
    .bezierCurveTo(c1x, c1y, c2x, c2y, x, y)
    .arcTo(x1, y1, x2, y2, radius)
    .arc(x, y, radius, startAngle, endAngle,
anticlockwise)
    .rect(x, y, width, height)
    .closePath()
    .fill();
var path = ["move", x, y,
            "line", x, y,
            "quadratic", cpx, cpy, x, y,
            "arc", x, y, radius, startAngle,
endAngle, anticlockwise];
context.path(path).close().fill();

context.path(["move", 10, 10, "line", 50,
50]).close().fill();
no way
No way to store path
more!
Not enough primitives
Canvas
Canvas
support
  Bad support
Canvas
89%
81%
76%
74%
Zero
HTML 5
Canvas
Thank You


dmitry@baranovskiy.com
Thank You
Photos used in this presentation:
http://www.flickr.com/photos/garryknight/2390411392/
http://www.flickr.com/photos/livenature/233281535/
http://www.flickr.com/photos/yoadolescente/3212368604/
http://www.flickr.com/photos/andreassolberg/433734311/
http://www.flickr.com/photos/cassidy/67331975/
http://www.flickr.com/photos/b-tal/93425807/
http://www.flickr.com/photos/pefectfutures/163853250/
http://www.flickr.com/photos/streetart-berlin/3746020273/
http://www.flickr.com/photos/streetart-berlin/3954856553/
http://www.flickr.com/photos/streetart-berlin/3947360186/
http://www.flickr.com/photos/streetart-berlin/3949549099/
http://www.flickr.com/photos/streetart-berlin/3949546871/
http://www.flickr.com/photos/streetart-berlin/3926942710/
http://www.flickr.com/photos/streetart-berlin/3834021290/


                dmitry@baranovskiy.com

More Related Content

What's hot (20)

Mosaic plot in R.
Mosaic plot in R.Mosaic plot in R.
Mosaic plot in R.
 
Intro to HTML5 Canvas
Intro to HTML5 CanvasIntro to HTML5 Canvas
Intro to HTML5 Canvas
 
My favorite slides
My favorite slidesMy favorite slides
My favorite slides
 
Proga 0706
Proga 0706Proga 0706
Proga 0706
 
Drawing with the HTML5 Canvas
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
 
CDAT - graphics - vcs - xmgrace - Introduction
CDAT - graphics - vcs - xmgrace - Introduction CDAT - graphics - vcs - xmgrace - Introduction
CDAT - graphics - vcs - xmgrace - Introduction
 
Funcion matematica
Funcion matematicaFuncion matematica
Funcion matematica
 
Proga 0518
Proga 0518Proga 0518
Proga 0518
 
Html5 canvas
Html5 canvasHtml5 canvas
Html5 canvas
 
Proga 0629
Proga 0629Proga 0629
Proga 0629
 
Supstat nyc subway
Supstat nyc subwaySupstat nyc subway
Supstat nyc subway
 
UIWebViewでつくるUI
UIWebViewでつくるUIUIWebViewでつくるUI
UIWebViewでつくるUI
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 
Kwp2 100121
Kwp2 100121Kwp2 100121
Kwp2 100121
 
OOXX
OOXXOOXX
OOXX
 
Internal workshop es6_2015
Internal workshop es6_2015Internal workshop es6_2015
Internal workshop es6_2015
 
Graphics point clipping c program
Graphics point clipping c programGraphics point clipping c program
Graphics point clipping c program
 
Css5 canvas
Css5 canvasCss5 canvas
Css5 canvas
 
HTML5 Canvas
HTML5 CanvasHTML5 Canvas
HTML5 Canvas
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video game
 

Viewers also liked

Selenium: What Is It Good For
Selenium: What Is It Good ForSelenium: What Is It Good For
Selenium: What Is It Good ForAllan Chappell
 
Take Control of Your Facilities: Explore the Tools for Aligning Space, Capita...
Take Control of Your Facilities: Explore the Tools for Aligning Space, Capita...Take Control of Your Facilities: Explore the Tools for Aligning Space, Capita...
Take Control of Your Facilities: Explore the Tools for Aligning Space, Capita...Sightlines
 
Enhancing the Value of Streets for Pedestrians, Bicyclists, and Motorists
Enhancing the Value of Streets for Pedestrians, Bicyclists, and MotoristsEnhancing the Value of Streets for Pedestrians, Bicyclists, and Motorists
Enhancing the Value of Streets for Pedestrians, Bicyclists, and MotoristsAndy Boenau
 
Pg connects bangalore re engagment advertising a dummies guide
Pg connects bangalore re engagment advertising a dummies guidePg connects bangalore re engagment advertising a dummies guide
Pg connects bangalore re engagment advertising a dummies guideFiksu
 
Backlog, Deferred Maintenance and its use in Planning
Backlog, Deferred Maintenance and its use in PlanningBacklog, Deferred Maintenance and its use in Planning
Backlog, Deferred Maintenance and its use in PlanningSightlines
 
Kakamega County Audit Report 2014/2015
Kakamega County Audit Report 2014/2015Kakamega County Audit Report 2014/2015
Kakamega County Audit Report 2014/2015The Star Newspaper
 
Make your pitch perfect, using competitive and emotional intelligence - SEOZONE
Make your pitch perfect, using competitive and emotional intelligence - SEOZONEMake your pitch perfect, using competitive and emotional intelligence - SEOZONE
Make your pitch perfect, using competitive and emotional intelligence - SEOZONEAlexandraTachalova
 
JAWS FESTA TOKAIDO 2016
JAWS FESTA TOKAIDO 2016JAWS FESTA TOKAIDO 2016
JAWS FESTA TOKAIDO 2016陽平 山口
 
Lire Rythme, une nouvelle de Chaplin
Lire Rythme, une nouvelle de ChaplinLire Rythme, une nouvelle de Chaplin
Lire Rythme, une nouvelle de ChaplinLaila Methnani
 
Spartan challenge 10 11
Spartan challenge 10 11Spartan challenge 10 11
Spartan challenge 10 11Robjenna
 
Create content according to buyer's journey
Create content according to buyer's journeyCreate content according to buyer's journey
Create content according to buyer's journeyPengyuan Zhao
 
交點台中2016.3月 - 簡正強 - 青銀世代,翻轉農業
交點台中2016.3月 - 簡正強 - 青銀世代,翻轉農業 交點台中2016.3月 - 簡正強 - 青銀世代,翻轉農業
交點台中2016.3月 - 簡正強 - 青銀世代,翻轉農業 交點
 
14 Machine Learning Single Layer Perceptron
14 Machine Learning Single Layer Perceptron14 Machine Learning Single Layer Perceptron
14 Machine Learning Single Layer PerceptronAndres Mendez-Vazquez
 
Connected health
Connected healthConnected health
Connected healthDeloitte UK
 
TOP Growth Hacking acquisition Tools for 2017 - BY Akshay Gaur
TOP Growth Hacking acquisition Tools for 2017 - BY Akshay GaurTOP Growth Hacking acquisition Tools for 2017 - BY Akshay Gaur
TOP Growth Hacking acquisition Tools for 2017 - BY Akshay GaurAkshay Gaur
 

Viewers also liked (17)

Selenium: What Is It Good For
Selenium: What Is It Good ForSelenium: What Is It Good For
Selenium: What Is It Good For
 
Take Control of Your Facilities: Explore the Tools for Aligning Space, Capita...
Take Control of Your Facilities: Explore the Tools for Aligning Space, Capita...Take Control of Your Facilities: Explore the Tools for Aligning Space, Capita...
Take Control of Your Facilities: Explore the Tools for Aligning Space, Capita...
 
Enhancing the Value of Streets for Pedestrians, Bicyclists, and Motorists
Enhancing the Value of Streets for Pedestrians, Bicyclists, and MotoristsEnhancing the Value of Streets for Pedestrians, Bicyclists, and Motorists
Enhancing the Value of Streets for Pedestrians, Bicyclists, and Motorists
 
Pg connects bangalore re engagment advertising a dummies guide
Pg connects bangalore re engagment advertising a dummies guidePg connects bangalore re engagment advertising a dummies guide
Pg connects bangalore re engagment advertising a dummies guide
 
More than a score - Using Ratings and Reviews in Real Estate
More than a score - Using Ratings and Reviews in Real EstateMore than a score - Using Ratings and Reviews in Real Estate
More than a score - Using Ratings and Reviews in Real Estate
 
Backlog, Deferred Maintenance and its use in Planning
Backlog, Deferred Maintenance and its use in PlanningBacklog, Deferred Maintenance and its use in Planning
Backlog, Deferred Maintenance and its use in Planning
 
Kakamega County Audit Report 2014/2015
Kakamega County Audit Report 2014/2015Kakamega County Audit Report 2014/2015
Kakamega County Audit Report 2014/2015
 
Make your pitch perfect, using competitive and emotional intelligence - SEOZONE
Make your pitch perfect, using competitive and emotional intelligence - SEOZONEMake your pitch perfect, using competitive and emotional intelligence - SEOZONE
Make your pitch perfect, using competitive and emotional intelligence - SEOZONE
 
JAWS FESTA TOKAIDO 2016
JAWS FESTA TOKAIDO 2016JAWS FESTA TOKAIDO 2016
JAWS FESTA TOKAIDO 2016
 
Lire Rythme, une nouvelle de Chaplin
Lire Rythme, une nouvelle de ChaplinLire Rythme, une nouvelle de Chaplin
Lire Rythme, une nouvelle de Chaplin
 
Spartan challenge 10 11
Spartan challenge 10 11Spartan challenge 10 11
Spartan challenge 10 11
 
Create content according to buyer's journey
Create content according to buyer's journeyCreate content according to buyer's journey
Create content according to buyer's journey
 
交點台中2016.3月 - 簡正強 - 青銀世代,翻轉農業
交點台中2016.3月 - 簡正強 - 青銀世代,翻轉農業 交點台中2016.3月 - 簡正強 - 青銀世代,翻轉農業
交點台中2016.3月 - 簡正強 - 青銀世代,翻轉農業
 
14 Machine Learning Single Layer Perceptron
14 Machine Learning Single Layer Perceptron14 Machine Learning Single Layer Perceptron
14 Machine Learning Single Layer Perceptron
 
My favourite game
My favourite gameMy favourite game
My favourite game
 
Connected health
Connected healthConnected health
Connected health
 
TOP Growth Hacking acquisition Tools for 2017 - BY Akshay Gaur
TOP Growth Hacking acquisition Tools for 2017 - BY Akshay GaurTOP Growth Hacking acquisition Tools for 2017 - BY Akshay Gaur
TOP Growth Hacking acquisition Tools for 2017 - BY Akshay Gaur
 

Similar to Canvas

How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1Bitla Software
 
Computer graphics lab manual
Computer graphics lab manualComputer graphics lab manual
Computer graphics lab manualUma mohan
 
Creating masterpieces with raphael
Creating masterpieces with raphaelCreating masterpieces with raphael
Creating masterpieces with raphaelPippi Labradoodle
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationAnthony Starks
 
Computer graphics lab assignment
Computer graphics lab assignmentComputer graphics lab assignment
Computer graphics lab assignmentAbdullah Al Shiam
 
Exploring fractals in CSS, @fronttrends, Warsaw, 2015
Exploring fractals in CSS, @fronttrends, Warsaw, 2015Exploring fractals in CSS, @fronttrends, Warsaw, 2015
Exploring fractals in CSS, @fronttrends, Warsaw, 2015pixelass
 
Writing a Space Shooter with HTML5 Canvas
Writing a Space Shooter with HTML5 CanvasWriting a Space Shooter with HTML5 Canvas
Writing a Space Shooter with HTML5 CanvasSteve Purkis
 
Better d3 charts with tdd
Better d3 charts with tddBetter d3 charts with tdd
Better d3 charts with tddMarcos Iglesias
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebRobin Hawkes
 
Standford 2015 week3: Objective-C Compatibility, Property List, Views
Standford 2015 week3: Objective-C Compatibility, Property List, ViewsStandford 2015 week3: Objective-C Compatibility, Property List, Views
Standford 2015 week3: Objective-C Compatibility, Property List, Views彼得潘 Pan
 
Create a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdfCreate a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdfarihantmobileselepun
 
Introduction to d3js (and SVG)
Introduction to d3js (and SVG)Introduction to d3js (and SVG)
Introduction to d3js (and SVG)zahid-mian
 
Canvas
CanvasCanvas
CanvasRajon
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)Oswald Campesato
 

Similar to Canvas (20)

SVGo workshop
SVGo workshopSVGo workshop
SVGo workshop
 
CoW Documentatie
CoW DocumentatieCoW Documentatie
CoW Documentatie
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
Canvas - The Cure
Canvas - The CureCanvas - The Cure
Canvas - The Cure
 
Computer graphics lab manual
Computer graphics lab manualComputer graphics lab manual
Computer graphics lab manual
 
Creating masterpieces with raphael
Creating masterpieces with raphaelCreating masterpieces with raphael
Creating masterpieces with raphael
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
 
Computer graphics lab assignment
Computer graphics lab assignmentComputer graphics lab assignment
Computer graphics lab assignment
 
Exploring fractals in CSS, @fronttrends, Warsaw, 2015
Exploring fractals in CSS, @fronttrends, Warsaw, 2015Exploring fractals in CSS, @fronttrends, Warsaw, 2015
Exploring fractals in CSS, @fronttrends, Warsaw, 2015
 
Raphaël
RaphaëlRaphaël
Raphaël
 
Writing a Space Shooter with HTML5 Canvas
Writing a Space Shooter with HTML5 CanvasWriting a Space Shooter with HTML5 Canvas
Writing a Space Shooter with HTML5 Canvas
 
Better d3 charts with tdd
Better d3 charts with tddBetter d3 charts with tdd
Better d3 charts with tdd
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
Standford 2015 week3: Objective-C Compatibility, Property List, Views
Standford 2015 week3: Objective-C Compatibility, Property List, ViewsStandford 2015 week3: Objective-C Compatibility, Property List, Views
Standford 2015 week3: Objective-C Compatibility, Property List, Views
 
Create a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdfCreate a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdf
 
Introduction to d3js (and SVG)
Introduction to d3js (and SVG)Introduction to d3js (and SVG)
Introduction to d3js (and SVG)
 
Canvas
CanvasCanvas
Canvas
 
Computer graphics
Computer graphicsComputer graphics
Computer graphics
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 

More from Dmitry Baranovskiy (14)

JavaScript: enter the dragon
JavaScript: enter the dragonJavaScript: enter the dragon
JavaScript: enter the dragon
 
The Origins of Magic
The Origins of MagicThe Origins of Magic
The Origins of Magic
 
Demystifying Prototypes
Demystifying PrototypesDemystifying Prototypes
Demystifying Prototypes
 
Type Recognition
Type RecognitionType Recognition
Type Recognition
 
Raphaël JS Conf
Raphaël JS ConfRaphaël JS Conf
Raphaël JS Conf
 
Obvious Secrets of JavaScript
Obvious Secrets of JavaScriptObvious Secrets of JavaScript
Obvious Secrets of JavaScript
 
Your JavaScript Library
Your JavaScript LibraryYour JavaScript Library
Your JavaScript Library
 
SVG
SVGSVG
SVG
 
Java Script Workshop
Java Script WorkshopJava Script Workshop
Java Script Workshop
 
Raphael
RaphaelRaphael
Raphael
 
Web Vector Graphics
Web Vector GraphicsWeb Vector Graphics
Web Vector Graphics
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the Web
 
Microformats—the hidden treasure
Microformats—the hidden treasureMicroformats—the hidden treasure
Microformats—the hidden treasure
 
Advanced JavaScript Techniques
Advanced JavaScript TechniquesAdvanced JavaScript Techniques
Advanced JavaScript Techniques
 

Recently uploaded

activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimizationarrow10202532yuvraj
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Alexander Turgeon
 

Recently uploaded (20)

activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024
 

Canvas

  • 1. Canvas L5 FT W! H TM Web Directions South 2009 Dmitry Barano vskiy
  • 2. “The canvas element represents a!resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly” HTML 5 Specification
  • 4. Teenager of web technologies
  • 7. Awesome What is Awesome? !
  • 10. api API is small & simple
  • 20. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d");
  • 22. var a = context.globalAlpha; context.globalAlpha = a * 0.5; var b = context.globalCompositeOperation; context.globalCompositeOperation = "xor";
  • 23. context.strokeStyle = "#fc0"; context.fillStyle = "#000"; var gradient = context.createLinearGradient(x1, y1, x2, y2); // or var gradient = context.createRadialGradient(x1, y1, r1, x2, y2, r2); gradient.addColorStop(0 / 6, "red"); gradient.addColorStop(1 / 6, "orange"); gradient.addColorStop(2 / 6, "yellow"); gradient.addColorStop(3 / 6, "green"); gradient.addColorStop(4 / 6, "blue"); gradient.addColorStop(5 / 6, "navy"); gradient.addColorStop(6 / 6, "purple"); context.fillStyle = gradient;
  • 24. context.lineWidth = 2; context.lineCap = "round"; context.lineJoin = "bevel"; context.miterLimit = 5; context.shadowColor = "#000"; context.shadowOffsetX = 0; context.shadowOffsetY = 3; context.shadowBlur = 7;
  • 26. context.clearRect(x, y, width, height); context.fillRect(x, y, width, height); context.strokeRect(x, y, width, height);
  • 28. context.beginPath(); context.closePath(); context.moveTo(x, y); context.lineTo(x, y); context.quadraticCurveTo(cpx, cpy, x, y); context.bezierCurveTo(c1x, c1y, c2x, c2y, x, y); context.arcTo(x1, y1, x2, y2, radius); context.arc(x, y, radius, startAngle, endAngle, anticlockwise); context.rect(x, y, width, height); context.fill(); context.stroke(); context.clip(); context.isPointInPath(x, y);
  • 30. context.font = 'italic 400 12px/2 Palatino, » Georgia, serif'; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText("Web Directions", 100, 120); context.strokeText("Canvas FTW", 100, 150, 140); var metrics = context.measureText("How wide is » this text?"), width = metrics.width;
  • 32. var image = new Image; image.onload = function () { context.drawImage(image, x, y); // or context.drawImage(image, x, y, w, h); // or context.drawImage(image, sx, sy, sw, sh, x, y, w, h); }; image.src = "graffiti.jpg";
  • 33. sy y var image = new Image; image.onload = sx function () { sh x h context.drawImage(image, x, y); // or sw w context.drawImage(image, x, y, w, h); // or context.drawImage(image, sx, sy, sw, sh, x, y, w, h); }; image.src = "graffiti.jpg";
  • 35. var data = context.createImageData(w, h); // or var data = context.createImageData(old_data); var data = context.getImageData(x, y, w, h); context.putImageData(data, dx, dy); // or context.putImageData(data, dx, dy, x, y, w, h);
  • 36. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0] };
  • 37. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0] };
  • 38. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0] }; R G B A
  • 43. context.lineWidth = 2; context.lineCap = "round"; context.lineJoin = "bevel"; context.miterLimit = 5; context.shadowColor = "#000"; context.shadowOffsetX = 0; context.shadowOffsetY = 3; context.shadowBlur = 7;
  • 44. context.setAttr({ lineWidth: 2, lineCap: "round", lineJoin: "bevel", miterLimit: 5, shadowColor: "#000", shadowOffsetX: 0, shadowOffsetY: 3, shadowBlur: 7 });
  • 46. context.beginPath(); context.moveTo(x, y); context.lineTo(x, y); context.quadraticCurveTo(cpx, cpy, x, y); context.bezierCurveTo(c1x, c1y, c2x, c2y, x, y); context.arcTo(x1, y1, x2, y2, radius); context.arc(x, y, radius, startAngle, endAngle, anticlockwise); context.rect(x, y, width, height); context.closePath(); context.fill();
  • 47. context.beginPath() .moveTo(x, y) .lineTo(x, y) .quadraticCurveTo(cpx, cpy, x, y) .bezierCurveTo(c1x, c1y, c2x, c2y, x, y) .arcTo(x1, y1, x2, y2, radius) .arc(x, y, radius, startAngle, endAngle, anticlockwise) .rect(x, y, width, height) .closePath() .fill();
  • 48. var path = ["move", x, y, "line", x, y, "quadratic", cpx, cpy, x, y, "arc", x, y, radius, startAngle, endAngle, anticlockwise]; context.path(path).close().fill(); context.path(["move", 10, 10, "line", 50, 50]).close().fill();
  • 49. no way No way to store path
  • 53. support Bad support
  • 55. 89%
  • 56. 81%
  • 57. 76%
  • 58. 74%
  • 59. Zero
  • 63. Thank You Photos used in this presentation: http://www.flickr.com/photos/garryknight/2390411392/ http://www.flickr.com/photos/livenature/233281535/ http://www.flickr.com/photos/yoadolescente/3212368604/ http://www.flickr.com/photos/andreassolberg/433734311/ http://www.flickr.com/photos/cassidy/67331975/ http://www.flickr.com/photos/b-tal/93425807/ http://www.flickr.com/photos/pefectfutures/163853250/ http://www.flickr.com/photos/streetart-berlin/3746020273/ http://www.flickr.com/photos/streetart-berlin/3954856553/ http://www.flickr.com/photos/streetart-berlin/3947360186/ http://www.flickr.com/photos/streetart-berlin/3949549099/ http://www.flickr.com/photos/streetart-berlin/3949546871/ http://www.flickr.com/photos/streetart-berlin/3926942710/ http://www.flickr.com/photos/streetart-berlin/3834021290/ dmitry@baranovskiy.com