Home › Image Tools › Sports Tactics Board
Sports Tactics Board
A digital coaching whiteboard: choose a basketball court, soccer pitch, football field or hockey rink, drag players into place, draw runs, passes, dribbles and screens, then add frames to animate the play step by step. Export any frame as a PNG for your team.
Last updated:
Advertisement
Advertisement
How to use the Sports Tactics Board
- Pick a sport. The players are placed in a typical formation for it.
- Drag players with the Move tool, or add more players, a ball or cones.
- Draw the action: choose Run, Pass, Dribble or Screen and drag on the field from a player to the target.
- Add a frame for the next step, move players to their new spots and draw the next arrows.
- Press Play to animate all frames, then Download PNG to share a frame.
Standard diagram symbols
| Symbol | Meaning | Typical use |
|---|---|---|
| Solid line with arrowhead | Player movement without the ball | Cuts, runs in behind, routes, skating lanes |
| Dashed line with arrowhead | Pass | Entry passes, switches of play, outlet passes |
| Wavy line with arrowhead | Dribble or carrying the ball/puck | Drives, carries through midfield, zone entries |
| Line ending in a short bar | Screen, pick or block | Ball screens, down screens, pass-blocking assignments |
| Numbered circles | Players (team A red, team B blue) | Positions 1-5 in basketball, shirt numbers or position letters elsewhere |
Surface dimensions used
| Surface | Size | Key markings drawn |
|---|---|---|
| Basketball (NBA) | 94 × 50 ft | 16 ft lane, 15 ft free-throw line, 23.75 ft three-point arc (22 ft in the corners), 4 ft restricted area |
| Soccer | 105 × 68 m | 16.5 m penalty area, 5.5 m goal area, 11 m penalty spot, 9.15 m centre circle and arc, 7.32 m goals |
| American football (NFL), half field | 60 × 53.3 yd | Midfield to the end line: 10 yd end zone, 5 yd lines, numbers every 10 yd, hash marks 70 ft 9 in from each sideline, 2-yard try line |
| Ice hockey (NHL) | 200 × 85 ft | 28 ft corner radius, goal lines 11 ft from the boards, blue lines 75 ft from the ends, 15 ft faceoff circles, 6 ft crease |
Tips for clear play diagrams
- One idea per frame. Show the first action (a screen, a pass) in frame 1, its result in frame 2, and so on.
- Keep the ball with its player. Move the ball in the next frame along the pass line and the animation shows the pass travelling.
- Use colour for options. Draw the first option in black and the counter or second option in red or blue.
- Add short labels such as "curl", "flare" or "overlap" so players remember the read, not just the path.
Frequently asked questions
How do frames work?
Each frame is one step of the play. Adding a frame copies the current player positions without the arrows, so you can move players to where they end up and draw the next actions. Play animates every player smoothly from one frame to the next, showing that frame's arrows along the way.
What do the arrow types mean?
These follow common coaching-diagram conventions: a solid line with an arrowhead is a player's run or cut, a dashed line is a pass, a wavy line is a dribble, and a line ending in a short bar is a screen (pick). Labels let you add notes such as 'curl' or 'switch'.
Are the courts and fields to scale?
Yes, the markings are drawn from regulation dimensions: an NBA-style basketball court (94 by 50 ft, 22 to 23.75 ft three-point line), a 105 by 68 m soccer pitch, an NFL-style football half field (50 yards plus a 10-yard end zone, 53.3 yards wide) and an NHL-size 200 by 85 ft hockey rink. High-school and youth surfaces are smaller but the proportions of the play stay readable.
Can I save my play?
The current board, including all frames, is saved automatically in your browser's local storage, so it is still there when you come back on the same device. Use Download PNG to keep an image of any frame.
Can I export an animation or video?
The tool exports still PNG images of each frame. To share an animation, play it on screen and use your device's screen recorder, or download each frame and send them in order.
How do I delete a player or arrow?
Choose the Erase tool and tap the player, arrow or label. Removing a player removes it from every frame. Undo restores the last change.
Does it work on a tablet?
Yes. The board uses pointer events, so you can drag players and draw arrows with a finger or stylus. On phones turn the device sideways for a larger field.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.
Related tools
Volleyball Rotation ToolEnter 6 players and a 5-1, 6-2 or 4-2 system to see all rotations and serve receive on a court.Soccer Lineup MakerBuild a soccer team lineup: pick a formation, drag players on the pitch, set kit colors, save PNG.Online WhiteboardFree infinite whiteboard with pen, shapes, sticky notes and text. Export PNG or SVG, autosaves.Draw on ImageAnnotate photos and screenshots with arrows, boxes, text, highlighter and numbered steps.Background RemoverRemove image backgrounds automatically with AI.Photo EnhancerOne-click auto enhance: fix exposure, contrast, color cast and sharpness, one photo or a batch.Remove Object from PhotoBrush over unwanted objects, people or text and fill the area with matching background.Make Image TransparentRemove a white or solid-color background and save a transparent PNG, right in your browser.Photo to CartoonTurn photos into cartoons with smooth colors and bold outlines. Free, private, no upload.Add Watermark to PhotoAdd a text or logo watermark to one or many photos at once.Blur Image & Face Pixelate ToolBlur or pixelate faces, plates and backgrounds in a photo.Pixelate Image & Pixel Art ConverterTurn any picture into pixel art with retro palettes and dithering.Add Text to ImageAdd styled text layers with outline and shadow to any photo, then downloadRound Corners ImageGive any picture rounded, circle or squircle corners and save a transparent PNG.Grayscale Image ConverterTurn color photos into black and white with luma, luminance or average methods and sepia.Photo FiltersApply 27 one-click photo filters like Vintage, Noir and Teal & Orange with an intensity slider.Photo EditorEdit photos online: brightness, contrast, saturation, crop, rotate, flip and filters with undo.Image SharpenerSharpen soft or slightly blurry photos with a real unsharp mask and before/after view.Invert Image ColorsTurn any picture into a color negative, with R/G/B channel toggles and an intensity slider.Screenshot BeautifierPut screenshots on gradient backgrounds with padding, rounded corners, shadow and a browser frame.Image Metadata ViewerSee a photo's EXIF data: camera, lens, exposure, date and GPS location, then strip it in one click.EXIF RemoverRemove EXIF, GPS location and other metadata from JPG, PNG and WEBP photos.Online PaintDraw and paint in your browser: brushes, shapes, fill bucket, text, undo and PNG export.Photo to SketchTurn any photo into a pencil, charcoal or color sketch in your browser and download it.GIF Frame ExtractorSplit an animated GIF into PNG frames with delays, a sprite sheet and ZIP download.Photo Frame MakerPut photos in polaroid, film strip, gallery, rounded or shadow frames with a caption.Duotone GeneratorTurn any photo into a bold two-color duotone image with presets, custom colors and intensity.Glitch Image EffectAdd RGB split, scanlines, slice shifts and noise to a photo for a digital glitch look.Add Date Stamp to PhotoStamp the EXIF or a custom date on photos in a retro orange camera font. Batch and ZIP download.Add Drop Shadow to ImageAdd a drop, long or reflection shadow to PNGs and photos and save a transparent PNG.Add Text to GIFPut captions on animated GIFs with outline, position and frame range, then download.Blend Two ImagesOverlay two photos with opacity, 16 blend modes, fades and free positioning, then download.Blur Photo BackgroundBlur the background of any photo for a portrait-mode look. AI subject detection, no upload.Brick Mosaic GeneratorTurn a photo into a toy-brick stud mosaic with a parts list and printable build guide PDF.Online Document ScannerTurn photos of paper into clean scans: auto edge detection, perspective fix, multi-page PDF.Add Film Grain to PhotoAdd realistic analog film grain, light leaks, fade and vignette to any photo, then download.GIF Speed ChangerSpeed up or slow down an animated GIF, or set each frame's delay, without losing quality.Halftone GeneratorTurn images into mono or CMYK halftone dots and lines; export PNG or SVG.Image Opacity ChangerMake an image semi-transparent with an opacity slider or fade, and save a transparent PNG.Photo to WatercolorTurn a photo into a watercolor painting with soft washes, color bleed, wet edges and paper texture.Product Photo White BackgroundRemove the background and center products on pure white at 2000 x 2000 for marketplaces. Batch.Redact ImageBlack out or pixelate private info in screenshots; burned in, metadata stripped, PNG download.Rubber Stamp MakerDesign round or rectangular stamps with curved text, borders, stars and grunge ink; PNG or SVG.Signature Background RemoverTurn a signature photo or scan into a clean transparent PNG: threshold, ink color, auto-crop.Skin SmoothingSmooth skin in portraits with face-aware retouching that keeps eyes, lips and skin texture sharp.Straighten ImageFix a tilted photo: rotate by any angle with a grid, auto-crop the corners or level the horizon.AI Style TransferRepaint your photo in the style of any painting or pattern with AI, right in your browser.SVG EditorEdit SVG files visually: move shapes, change colors, text and strokes, add shapes, edit the code.Symmetry Drawing ToolDraw mandalas and kaleidoscope art with radial and mirror symmetry, glow brushes and PNG export.Virtual Background MakerDesign 1920×1080 video call backgrounds with your name, title, logo, blur and branded templates.EXIF EditorEdit photo EXIF and IPTC: date taken, camera, GPS location, copyright and caption, in batch.Face Symmetry TestUpload a face photo to see left-left and right-right mirror composites and a symmetry score.Add Outline to PNGAdd a stroke outline around transparent PNG cutouts: width, color, softness and double borders.Dehaze ImageRemove haze, fog and smog from photos with the dark channel prior. Free, private, in your browser.HDR Photo EffectGive any single photo an HDR look with local tone mapping, detail boost and a strength slider.Low Light Photo EnhancerBrighten dark and night photos with an adaptive tone curve plus noise reduction.Photo StackingStack photos online: star trails (lighten), noise reduction (mean) and remove passers-by (median).Image Noise RemoverRemove grain and color noise from photos with median, bilateral or non-local means filters.Image Dithering ToolDither photos with Floyd-Steinberg, Atkinson or Bayer in 1-bit, Game Boy, CGA and retro palettes.Perspective CorrectionDrag 4 corners to straighten skewed photos of signs, screens and whiteboards, then download.Photo Mosaic MakerBuild a big picture out of many small photos by color matching, then export a high-res PNG.Photo to Oil PaintingTurn a photo into an oil painting with brush size, detail, impasto and canvas texture.Red Eye RemoverClick on red eyes to fix them automatically: adjustable threshold, undo, download the photo.Tilt Shift EffectMake photos look like miniature models with an adjustable tilt-shift focus band and blur.Colorize Black and White PhotoAdd natural color to old black and white photos with AI that runs in your browser. No upload.Photo to AnimeTurn selfies and landscapes into anime-style art with AI in your browser. Free, no upload.Face Shape DetectorUpload a selfie to find your face shape on-device, with hairstyle and glasses tips.Add Background to Transparent PNGFill the transparent areas of a PNG with a color, gradient or photo, plus padding and shadow.