Renderer API Reference
The renderer provides WebGL-based rendering for sprites, costumes, and custom graphics. Access it via util.runtime.renderer.
Quick Start
class MyExtension {
myBlock(args, util) {
const renderer = util.runtime.renderer;
// Create a skin
const skinId = renderer.createBitmapSkin(imageData, 1);
// Create a drawable
const drawableId = renderer.createDrawable('foreground');
// Apply skin to drawable
renderer.updateDrawableProperties(drawableId, { skinId });
}
}
Skin Management
Skins provide textures and visual appearance for drawables.
Creating Skins
- createBitmapSkin() - Create skin from image data
- createSVGSkin() - Create skin from SVG markup
- createPenSkin() - Create pen layer skin
- createTextSkin() - Create text bubble skin
Updating Skins
- updateBitmapSkin() - Update existing bitmap skin
- updateSVGSkin() - Update existing SVG skin
- updateTextSkin() - Update text bubble skin
Managing Skins
- destroySkin() - Destroy a skin and free resources
- getSkinSize() - Get skin dimensions
- getSkinRotationCenter() - Get rotation center
- markSkinAsPrivate() - Mark skin as private
Drawable Management
Drawables are visual objects rendered on screen.
Creating & Destroying
- createDrawable() - Create new drawable in layer group
- destroyDrawable() - Destroy drawable and free resources
Positioning & Ordering
- updateDrawableProperties() - Update position, scale, effects, etc.
- setDrawableOrder() - Change z-order/layer
- getDrawableOrder() - Get current z-order
Visual Properties
- getCurrentSkinSize() - Get size of drawable's current skin
- getBounds() - Get tight bounding box
- getBoundsForBubble() - Get bounds for text bubble
Collision Detection
- isTouchingColor() - Check if drawable touches a color
- isTouchingDrawables() - Check if drawables overlap
Rendering Control
- draw() - Manually trigger a render
- requestSnapshot() - Capture canvas as data URL
- setBackgroundColor() - Set stage background color
Configuration
- resize() - Set physical canvas size
- setStageSize() - Set logical stage bounds
Internal Properties
⚠️ Warning: Internal APIs may change without notice
- renderer._allSkins - Array of all skin objects
- renderer._allDrawables - Array of all drawable objects
Key Concepts
- SVG Loading Patterns - Handle async SVG loading
- Internal Properties - Using internal renderer APIs
- Resource Management - Proper cleanup patterns
See Also
- Scratch API - Extensions API basics
- VM API - Runtime and execution control
- Audio API - Sound and music APIs