{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipycanvas import Canvas"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Gradients\n",
    "\n",
    "Unlike the Web2DCanvas, the color stops must be passed as a list of color stops when creating the gradient. Once created, the gradient is read-only, it cannot be modified.\n",
    "\n",
    "## LinearGradient\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas = Canvas(width=700, height=50)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "gradient = canvas.create_linear_gradient(\n",
    "    0,\n",
    "    0,  # Start position (x0, y0)\n",
    "    700,\n",
    "    0,  # End position (x1, y1)\n",
    "    # List of color stops\n",
    "    [\n",
    "        (0, \"red\"),\n",
    "        (1 / 6, \"orange\"),\n",
    "        (2 / 6, \"yellow\"),\n",
    "        (3 / 6, \"green\"),\n",
    "        (4 / 6, \"blue\"),\n",
    "        (5 / 6, \"#4B0082\"),\n",
    "        (1, \"violet\"),\n",
    "    ],\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas.fill_style = gradient"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas.fill_rect(0, 0, 700, 50)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## RadialGradient"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas2 = Canvas(width=570, height=200)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "radial_gradient = canvas2.create_radial_gradient(\n",
    "    238,\n",
    "    50,\n",
    "    10,  # Start circle (x0, y0, r0)\n",
    "    238,\n",
    "    50,\n",
    "    300,  # End circle (x1, y1, r1)\n",
    "    [\n",
    "        (0, \"#8ED6FF\"),\n",
    "        (1, \"#004CB3\"),\n",
    "    ],\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas2.fill_style = radial_gradient"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas2.fill_rect(0, 0, 570, 200)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "canvas2"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}