یک نمودار میله‌ای ساده با Canvas API رسم کنید که داده‌های [10, 25, 15, 30, 20] را نشان دهد و هر میله مقدار مربوطه را برچسب‌گذاری کند.

ابتدا یک عنصر در HTML داشته باشید و در جاوااسکریپت به کانتکست دوبعدی با getContext('2d') دسترسی پیدا کنید. ارتفاع هر میله را نسبت به بیشینه مقدار داده‌ها مقیاس‌دهی کنید، عرض میله و فاصله بین میله‌ها را محاسبه کنید، سپس با ctx.fillStyle و ctx.fillRect میله‌ها را رسم کنید و با ctx.fillText مقدار هر میله را بالای یا زیر آن بنویسید. از تنظیمات فونت و رنگ برای خوانایی استفاده کنید و اگر لازم است padding برای محورها در نظر بگیرید. نکات: برای کیفیت بهتر روی صفحات با DPR بالا، اندازه‌ی واقعی canvas را در جاوااسکریپت براساس devicePixelRatio تنظیم کنید و سپس سبک CSS را تنظیم کنید تا اسکرالرها هم صحیح نمایش داده شوند؛ قبل از رسم دوباره از ctx.clearRect استفاده کنید تا نمودار قبلی پاک شود.