Saturday, June 10, 2023
Creativeshory - Tech Blog
  • Home
  • Tech
    • Apps
    • Mobile
      • Phone Tracker
    • Printers
    • Electronics
      • PCB
    • Games
    • Web Hosting
    • Security
    • Software
      • PHP
    • Tools
  • Design
    • Animation
    • Graphics
    • Web Design
    • Templates
  • Digital Marketing
    • SEO
    • Social Media
    • Writing
    • E-commerce
  • WordPress
    • Plugins
  • Business
    • Finance
    • Stock Trading
    • Resources
    • Human Resource
    • Project Management
    • Branding
    • Entrepreneurs
    • Maintenance
    • Workflow
  • Infographics
  • Sponsored
  • Advice
    • Architecture
      • Building
      • Construction
    • Restaurant
    • Insurance
    • Automobile
      • Car Rental
    • Moving Overseas
    • Issues
    • Engineering
    • Energy Savings
  • Ideas
    • Home Decor
      • Interior Decorating
        • Furniture
    • Cultivation
  • Make Money
    • Freelancer
    • Stocks
  • LifeStyle
    • Beauty
    • Fashion
    • Music & Audio
    • Travel
    • Gemstones
  • Health and Fitness
    • Sports
    • Compensation Insurance
    • Pet Care
  • Education
    • Career Paths
  • Cryptocurrency
    • Bitcoin
    • Metaverse
    • Gambling
    • Digital Transformation
  • Entertainment
    • Guitar
  • Recipe
  • Collections
    • Wallets
  • Productivity
    • Organizing
  • About Us
  • Write For Us
  • Contact Us
No Result
View All Result
  • Home
  • Tech
    • Apps
    • Mobile
      • Phone Tracker
    • Printers
    • Electronics
      • PCB
    • Games
    • Web Hosting
    • Security
    • Software
      • PHP
    • Tools
  • Design
    • Animation
    • Graphics
    • Web Design
    • Templates
  • Digital Marketing
    • SEO
    • Social Media
    • Writing
    • E-commerce
  • WordPress
    • Plugins
  • Business
    • Finance
    • Stock Trading
    • Resources
    • Human Resource
    • Project Management
    • Branding
    • Entrepreneurs
    • Maintenance
    • Workflow
  • Infographics
  • Sponsored
  • Advice
    • Architecture
      • Building
      • Construction
    • Restaurant
    • Insurance
    • Automobile
      • Car Rental
    • Moving Overseas
    • Issues
    • Engineering
    • Energy Savings
  • Ideas
    • Home Decor
      • Interior Decorating
        • Furniture
    • Cultivation
  • Make Money
    • Freelancer
    • Stocks
  • LifeStyle
    • Beauty
    • Fashion
    • Music & Audio
    • Travel
    • Gemstones
  • Health and Fitness
    • Sports
    • Compensation Insurance
    • Pet Care
  • Education
    • Career Paths
  • Cryptocurrency
    • Bitcoin
    • Metaverse
    • Gambling
    • Digital Transformation
  • Entertainment
    • Guitar
  • Recipe
  • Collections
    • Wallets
  • Productivity
    • Organizing
  • About Us
  • Write For Us
  • Contact Us
No Result
View All Result
Creativeshory - Tech Blog
No Result
View All Result
Home Design

HTML Canvas Cheat Sheet

Arunshory M by Arunshory M
June 4, 2017
in Design, Infographics, Web Design
0 0
0
html5-canvas
6
SHARES
324
VIEWS
Share on FacebookShare on Twitter

This cheat sheet summarizes the complete HTML Canvas functionality, including shapes, styles & color, text, images, transformations, compositing & clipping, animation, pixel manipulation, hit regions & accessibility. It allows web developers to draw all sorts of graphics on the fly, using JavaScript. The tutorial is available to download for PNG, PDF formats and webpage on Skilled.co. The infographic below was designed by Skilled.co. Here, I listed some useful tips from that infographic.

Useful Tips

    1. Pre-render similar primitives or repeating objects on an off-screen canvas.

    2. Avoid floating-point coordinates and use integers instead.

    3. Don’t scale images in drawImage.

    4. CSS for large background images.

    5. Use multiple layered canvases for complex scenes.

    6. Scaling canvas using CSS transforms.

    7. Use the moz-opaque attribute (Gecko only).

    8. Avoid unnecessary canvas state changes.

    9. Batch canvas calls together.

    10. Avoid the shadowBlur property whenever possible.

    11. Try different ways to clear the canvas (clearRect() vs. fillRect() vs. resizing the canvas).

    12. Render screen differences only, not the whole new state.

    13. With animations, use window.requestAnimationFrame() instead of window.setInterval().

    14. Be careful with heavy physics libraries.

html-canvas-cheatsheet

Tags: canvascheat sheethtml5infographicstutorialweb designWeb Development
Arunshory M

Arunshory M

Arunshory is a founder of creativeshory, a professional tech & resource website. He is an avid learner and he has been blogging for several years.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Most Popular

  • 3 Simple Ways to Hack a Phone with Just the Number for 2023
    3 Simple Ways to Hack a Phone with Just the Number for 2023
  • 108 Best Free Logo Fonts for Your 2023 Brand Design Projects
    108 Best Free Logo Fonts for Your 2023 Brand Design Projects
  • 75 Inspiring Examples of Beautiful Loading Bar Designs for 2021
    75 Inspiring Examples of Beautiful Loading Bar Designs for 2021
  • The 59 Best Prototyping Tools 2023 for UI and UX Designers
    The 59 Best Prototyping Tools 2023 for UI and UX Designers
  • 7 Reasons Self Sticking Wallpaper Is The Perfect Choice For Your Bathroom
    7 Reasons Self Sticking Wallpaper Is The Perfect Choice For Your Bathroom
  • Blue Zircon- Everything you need to know
    Blue Zircon- Everything you need to know
  • How to Start Preparing For Your Exams From the Beginning of the Semester
    How to Start Preparing For Your Exams From the Beginning of the Semester
  • 10 Brilliant Tips on How to Create a Strategic Marketing Plan for Your Business
    10 Brilliant Tips on How to Create a Strategic Marketing Plan for Your Business
  • Watching sport vs playing sport: how do they compare?
    Watching sport vs playing sport: how do they compare?
  • Google Finally Shutting Down Its Orkut Social Network on September 30
    Google Finally Shutting Down Its Orkut Social Network on September 30
  • Terms & Conditions
  • Privacy Policy
  • About Us
  • Write For Us
  • Contact Us

Creativeshory.com. All Rights Reserved. © 2023 Reproduction of materials found on this site, in any form, without explicit permission is prohibited. Privacy Policy

No Result
View All Result
  • Home
  • Tech
    • Apps
    • Mobile
      • Phone Tracker
    • Printers
    • Electronics
      • PCB
    • Games
    • Web Hosting
    • Security
    • Software
      • PHP
    • Tools
  • Design
    • Animation
    • Graphics
    • Web Design
    • Templates
  • Digital Marketing
    • SEO
    • Social Media
    • Writing
    • E-commerce
  • WordPress
    • Plugins
  • Business
    • Finance
    • Stock Trading
    • Resources
    • Human Resource
    • Project Management
    • Branding
    • Entrepreneurs
    • Maintenance
    • Workflow
  • Infographics
  • Sponsored
  • Advice
    • Architecture
      • Building
      • Construction
    • Restaurant
    • Insurance
    • Automobile
      • Car Rental
    • Moving Overseas
    • Issues
    • Engineering
    • Energy Savings
  • Ideas
    • Home Decor
      • Interior Decorating
    • Cultivation
  • Make Money
    • Freelancer
    • Stocks
  • LifeStyle
    • Beauty
    • Fashion
    • Music & Audio
    • Travel
    • Gemstones
  • Health and Fitness
    • Sports
    • Compensation Insurance
    • Pet Care
  • Education
    • Career Paths
  • Cryptocurrency
    • Bitcoin
    • Metaverse
    • Gambling
    • Digital Transformation
  • Entertainment
    • Guitar
  • Recipe
  • Collections
    • Wallets
  • Productivity
    • Organizing
  • About Us
  • Write For Us
  • Contact Us

Creativeshory.com. All Rights Reserved. © 2023 Reproduction of materials found on this site, in any form, without explicit permission is prohibited. Privacy Policy

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist