Thursday, May 29, 2025
Creativeshory - Tech Blog
  • Home
  • Tech
    • Apps
    • Mobile
      • Phone Tracker
    • Printers
    • Electronics
      • PCB
    • Games
    • Web Hosting
    • Security
    • Software
      • PHP
    • Tools
  • Artificial Intelligence
  • Design
    • Animation
    • Graphics
    • Web Design
    • Templates
  • Digital Marketing
    • SEO
    • Social Media
    • YouTube
    • 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
    • Photography
    • 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
  • Artificial Intelligence
  • Design
    • Animation
    • Graphics
    • Web Design
    • Templates
  • Digital Marketing
    • SEO
    • Social Media
    • YouTube
    • 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
    • Photography
    • 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 Infographics

HTML Canvas Cheat Sheet

by Arun
2017/02/14 - Updated on 2017/06/04
in Infographics, Design, Web Design
0
html5-canvas
6
SHARES
303
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

Related

Tags: canvascheat sheethtml5infographicstutorialweb designWeb Development
Arun

Arun

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 *

I agree to the Terms & Conditions and Privacy Policy.

Most Popular

  • 18 Best Free Fonts for Designers: Expert-Picked Collection (2025)
    18 Best Free Fonts for Designers: Expert-Picked Collection (2025)
  • 108 Best Free Logo Fonts for Your 2024 Brand Design Projects
    108 Best Free Logo Fonts for Your 2024 Brand Design Projects
  • 4 Reasons to Have a Fast Internet Connection
    4 Reasons to Have a Fast Internet Connection
  • Bing Launches Three New Apps for Windows Phone: Travel, Food & Health
    Bing Launches Three New Apps for Windows Phone: Travel, Food & Health
  • The 75 Best Free Fonts for 2024
    The 75 Best Free Fonts for 2024
  • 75 Inspiring Examples of Beautiful Loading Bar Designs for 2021
    75 Inspiring Examples of Beautiful Loading Bar Designs for 2021
  • 136 Best Free Fonts for Logo Design in 2025
    136 Best Free Fonts for Logo Design in 2025
  • The 33 New Awesome Free Fonts for Designers
    The 33 New Awesome Free Fonts for Designers
  • 100 Best Free Fonts for Web Designers in 2025
    100 Best Free Fonts for Web Designers in 2025
  • Passive Income with Dropshipping Ecommerce Businesses: How to Make a Profit
    Passive Income with Dropshipping Ecommerce Businesses: How to Make a Profit
  • 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

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

No Result
View All Result
  • Home
  • Tech
    • Apps
    • Mobile
      • Phone Tracker
    • Printers
    • Electronics
      • PCB
    • Games
    • Web Hosting
    • Security
    • Software
      • PHP
    • Tools
  • Artificial Intelligence
  • Design
    • Animation
    • Graphics
    • Web Design
    • Templates
  • Digital Marketing
    • SEO
    • Social Media
    • YouTube
    • 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
    • Photography
    • 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

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.
 

Loading Comments...