Scale deliberately and inspect PNG export
See this course’s project requirements
A local original 4×4-to-64×64 pixel image tool with RGBA inspection, grayscale and threshold filters, preserved alpha and checked PNG export.
Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.
What to include
- Produce a checked RGBA and coordinate-to-offset inspection table.
- Demonstrate separate source/result buffers and a working original reset.
- Calculate and verify equal-channel grayscale with alpha unchanged.
- Produce a below/equal/above threshold matrix with preserved alpha.
- Create and inspect the actual 64×64 PNG with intended crisp scaling and alpha behavior.
- Deliver source, checked channel math, actual rendered/export evidence, and honest unavailable checks.
Review and revise
Use these criteria to check your work and choose what to improve.
- The implementation or declared simulation follows the supplied contract and retains inspectable original inputs.
- Normal, boundary and rejected cases are recorded with expected versus observed results.
- The changed case has a correct explanation and does not rely on hidden state.
- The project includes source, outputs, instructions and honest tool, privacy and verification limits.
Want more background?
The idea in everyday life
Files pixels.html, pixel-filters.mjs and test-pixels.mjs supply an original 4×4 pattern: each row repeats red, green, blue, transparent white. Serve locally with python3 -m http.server 8765 --bind 127.0.0.1. Export scales the result to 64×64 PNG.
A 4×4 pixel-art source scaled to 64×64 has a 16× scale factor. Disabling smoothing keeps each source block crisp; toBlob must return an actual PNG Blob before a download is offered.
Scale deliberately and inspect PNG export — original worked practice
A 4×4 pixel-art source scaled to 64×64 has a 16× scale factor. Disabling smoothing keeps each source block crisp; toBlob must return an actual PNG Blob before a download is offered.
Files pixels.html, pixel-filters.mjs and test-pixels.mjs supply an original 4×4 pattern: each row repeats red, green, blue, transparent white. Serve locally with python3 -m http.server 8765 --bind 127.0.0.1. Export scales the result to 64×64 PNG.
1. Step 1
Read the export canvas width/height 64 and calculate 64/4.
You should see: Each source pixel spans a 16×16 output block.
A 4×4 pixel-art source scaled to 64×64 has a 16× scale factor. Disabling smoothing keeps each source block crisp; toBlob must return an actual PNG Blob before a download is offered.
2. Step 2
Inspect imageSmoothingEnabled=false before drawImage.
You should see: The scaling is intentionally crisp rather than interpolated.
A 4×4 pixel-art source scaled to 64×64 has a 16× scale factor. Disabling smoothing keeps each source block crisp; toBlob must return an actual PNG Blob before a download is offered.
3. Step 3
Activate export, keep the downloaded file, and inspect its actual dimensions in an image viewer/file properties.
You should see: The delivered PNG should be 64×64.
A 4×4 pixel-art source scaled to 64×64 has a 16× scale factor. Disabling smoothing keeps each source block crisp; toBlob must return an actual PNG Blob before a download is offered.
4. Step 4
Record the output filename, dimensions, visual blocks, and any unavailable viewer checks.
You should see: An actual PNG-export inspection record.
A 4×4 pixel-art source scaled to 64×64 has a 16× scale factor. Disabling smoothing keeps each source block crisp; toBlob must return an actual PNG Blob before a download is offered.
What to finish
Create and inspect the actual 64×64 PNG with intended crisp scaling and alpha behavior.
Watch for this
Claiming a correct PNG export from the button label or filter arithmetic without inspecting the delivered file.
How can I tell I understand it?
Demonstrate the rule: A 4×4 pixel-art source scaled to 64×64 has a 16× scale factor. Disabling smoothing keeps each source block crisp; toBlob must return an actual PNG Blob before a download is offered. Use the supplied variant to distinguish a changed result from a broken implementation.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkTools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Source & access notes · checked 2026-10-01
Relevant documented module/API behavior inspected during expansion authoring; actual execution evidence is recorded separately. No grant eligibility is established.
Access: Official page retrieved with the web reader on 2026-10-01. Documentation reading does not certify execution in every native tool or browser.
Reuse: Original local practice files, fictional data, worked examples and questions. Concepts paraphrased and linked; source exercises are not copied.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.