{"id":13734165,"url":"https://github.com/feddelegrand7/fabricerin","last_synced_at":"2025-09-07T00:34:12.506Z","repository":{"id":45694203,"uuid":"282725762","full_name":"feddelegrand7/fabricerin","owner":"feddelegrand7","description":"Create Easily Canvas in Shiny and RMarkdown Documents","archived":false,"fork":false,"pushed_at":"2021-02-01T18:00:42.000Z","size":7461,"stargazers_count":55,"open_issues_count":3,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-31T06:26:15.615Z","etag":null,"topics":["canvas","javascript","r","rmarkdown","rmarkdown-document","rstats","shiny"],"latest_commit_sha":null,"homepage":"","language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/feddelegrand7.png","metadata":{"files":{"readme":"README.Rmd","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["https://www.buymeacoffee.com/Fodil"]}},"created_at":"2020-07-26T20:13:45.000Z","updated_at":"2025-04-07T15:16:51.000Z","dependencies_parsed_at":"2022-09-22T14:41:16.379Z","dependency_job_id":null,"html_url":"https://github.com/feddelegrand7/fabricerin","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/feddelegrand7/fabricerin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feddelegrand7%2Ffabricerin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feddelegrand7%2Ffabricerin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feddelegrand7%2Ffabricerin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feddelegrand7%2Ffabricerin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/feddelegrand7","download_url":"https://codeload.github.com/feddelegrand7/fabricerin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feddelegrand7%2Ffabricerin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273792894,"owners_count":25169223,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","javascript","r","rmarkdown","rmarkdown-document","rstats","shiny"],"created_at":"2024-08-03T03:00:53.126Z","updated_at":"2025-09-07T00:34:12.468Z","avatar_url":"https://github.com/feddelegrand7.png","language":"R","funding_links":["https://www.buymeacoffee.com/Fodil"],"categories":["R","UI Components"],"sub_categories":["Image / Audio / Video"],"readme":"---\noutput: github_document\n---\n\n\u003c!-- README.md is generated from README.Rmd. Please edit that file --\u003e\n\n```{r, include = FALSE}\nknitr::opts_chunk$set(\n  collapse = TRUE,\n  comment = \"#\u003e\",\n  fig.path = \"man/figures/README-\",\n  out.width = \"100%\"\n)\n```\n\n# fabricerin\n\n\u003c!-- badges: start --\u003e\n\n[![Travis build status](https://travis-ci.com/feddelegrand7/fabricerin.svg?branch=master)](https://travis-ci.com/feddelegrand7/fabricerin)\n[![CRAN_time_from_release](https://www.r-pkg.org/badges/ago/fabricerin)](https://cran.r-project.org/package=fabricerin)\n[![CRAN_latest_release_date](https://www.r-pkg.org/badges/last-release/fabricerin)](https://cran.r-project.org/package=fabricerin)\n[![metacran downloads](https://cranlogs.r-pkg.org/badges/fabricerin)](https://cran.r-project.org/package=fabricerin)\n[![metacran downloads](https://cranlogs.r-pkg.org/badges/grand-total/fabricerin)](https://cran.r-project.org/package=fabricerin)\n[![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)\n[![R badge](https://img.shields.io/badge/Build%20with-♥%20JS%20and%20R-pink)](https://github.com/feddelegrand7/fabricerin)\n\n\u003c!-- badges: end --\u003e\n\nThe `fabricerin` (spelled __fabrikerine__) package allows you to create easily canvas elements within your Shiny app and RMarkdown documents. Thanks to [Garrick Aden-Buie](https://twitter.com/grrrck?lang=en), you can also use it within your [xaringan](https://github.com/yihui/xaringan) slides. You can use the canvas to render shapes, images and text. You can also create a canvas for drawing/taking notes purposes. Under the hoods, `fabricerin` relies on the [fabricjs](http://fabricjs.com/) JavaScript library. \n\n\n\n## Installation\n\nYou can install `fabricerin` from [CRAN](https://CRAN.R-project.org/package=fabricerin) with: \n\n```{r, eval=FALSE}\n\ninstall.packages(\"fabricerin\")\n\n```\n\n\nYou can install the development version from [GitHub](https://github.com/) with:\n\n```{r, eval=FALSE}\n# install.packages(\"remotes\")\n\nremotes::install_github(\"feddelegrand7/fabricerin\")\n\n```\n\n\n## Examples: \n\nFirst of all, I'd like to state that all the example provided apply the same way to Shiny and Rmd documents. `fabricerin` is not an R wrapper for the fabricjs library. The package doesn't cover all the capabilities of the library. The `fabricerin` package  relies only on some specified features that according to me will help Shiny/Rmd users. Of course, if you need some improvement, feel free to create a Pull Request.  \n\n### `fabric_drawing()` Create a canvas for taking notes \n***\n\n\n`fabric_drawing()` is pretty useful when you want to teach something and write some notes at the same time, below I provide an example using the `xaringan` package. Inside a `xaringan` slide you can just (for example) run R code in the left and take notes in the right: \n\n\u003e Important: When you change a color, make sure that the __erase__ box is not checked. \n\n\n![](man/figures/t_example.gif)\n\n\n`fabric_drawing()` can be used the same way in Shiny: \n\n\n```{r, eval=FALSE}\nlibrary(shiny)\nlibrary(fabricerin)\n\n\nui \u003c- fluidPage(\n  \n  \n  fabric_drawing(cid = \"canvas123\")\n\n)\n\nserver \u003c- function(input, output){}\n\nshinyApp(ui, server)\n\n```\n\n![](man/figures/example1.gif)\n\n## `fabric_shape()` Render shape objects in canvas\n***\n\nCurrently, `fabricerin` supports three types of shapes: Rectangle, Triangle, Circle and Polygon. The user can interact with the shape and modify its position, size and rotation. If you want to disable this interactivity, you can set `selectable =FALSE`\n\n\n```{r, eval=FALSE}\n\nlibrary(shiny)\nlibrary(fabricerin)\n\n\nui \u003c- fluidPage(\n  \n\n  fabric_shape(cid = \"canvaId\", # canvas id\n               cfill = \"orange\", # canvas color\n               cwidth = 800, # the width of the canvas\n               cheight = 600, # the height of the canvas\n               shapeId = \"shapeId\", # shape id\n               shape = \"Rect\", \n               fill = \"red\", # shape color\n               width = 400, \n               height = 400, \n               left = 100, # the position of the shape from the left relative to the canvas\n               top = 100, # the position of the shape from the top relative to the canvas\n               strokecolor = \"darkblue\", \n               strokewidth = 5, \n               selectable = TRUE)\n  \n)\n\nserver \u003c- function(input, output){}\n\nshinyApp(ui, server)\n\n\n\n```\n\n\n![](man/figures/example3.gif)\n\n\nYou can add as many shape as you want to an existing canvas using the `fabric_shape_add()` function. __Don't forget to reference the preexisting canvas with its ID:__\n\n```{r, eval=FALSE}\nlibrary(shiny)\nlibrary(fabricerin)\n\n\nui \u003c- fluidPage(\n  \n  \n  fabric_shape(cid = \"canvaId\", \n               shapeId = \"cr1\", \n               shape = \"Circle\", \n               radius = 30, \n               left = 100), \n  \n  fabric_shape_add(cid = \"canvaId\", \n                   shapeId = \"cr2\", \n                   shape = \"Circle\", \n                   radius = 30, \n                   left = 200),\n  \n  fabric_shape_add(cid = \"canvaId\", \n                   shapeId = \"cr3\", \n                   shape = \"Circle\", \n                   radius = 30, \n                   left = 300),\n  \n  fabric_shape_add(cid = \"canvaId\", \n                   shapeId = \"cr4\", \n                   shape = \"Circle\", \n                   radius = 30, \n                   left = 400)\n  \n)\n\nserver \u003c- function(input, output){}\n\nshinyApp(ui, server)\n```\n\n![](man/figures/example4.png)\n\n\n## `fabric_image()` Render images in canvas\n***\n\nYou can insert an image within a canvas a play with it using the `fabric_image()` function. Note that this function accepts only URL external images.\n\n\n```{r, eval=FALSE}\n\nui \u003c- fluidPage(\n\nfabric_image(cid = \"cimage\",\n              cfill = \"lightblue\",\n              imgId = \"Rimg\",\n              imgsrc = \"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/R_logo.svg/724px-R_logo.svg.png\")\n\n              )\n\nserver \u003c- function(input, output) {}\n\n\nshinyApp(ui = ui, server = server)\n\n\n\n```\n\n![](man/figures/example5.gif)\n\n\nSimilar to shapes, you can add images to preexisting canvas using the `fabric_image_add()` function: \n\n\n```{r,eval=FALSE}\nlibrary(shiny)\nlibrary(fabricerin)\n\nui \u003c- fluidPage(\n\n fabric_image(cid = \"cimage\",\n              imgId = \"Rimg\",\n              imgsrc = \"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/R_logo.svg/724px-R_logo.svg.png\",\n              imgheight = 200,\n              imgwidth = 200),\n fabric_image_add(cid = \"cimage\",\n                  imgId = \"rstudioimg\",\n                  imgsrc = \"https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/dplyr.png\",\n                  imgwidth = 200,\n                  imgheight = 200,\n                  left = 400)\n                  )\n\nserver \u003c- function(input, output) {}\n\nshinyApp(ui = ui, server = server)\n\n\n```\n\n![](man/figures/r_dplyr_logo.png)\n\n\n## `fabric_text()` Render text elements in canvas\n***\n\nThe `fabric_text()` function has many arguments, feel free to check them out: \n\n```{r, eval=FALSE}\n\nui \u003c- fluidPage(\n\nfabric_text(cid = \"cId\",\n          textId = \"text\",\n          text = \" 'But A Hero Is A Guy Who Gives Out The Meat To Everyone Else. \\\\n I Want To Eat The Damn Meat!' \\\\n Monkey D. Luffy\",\n          cfill = \"#DD5347\",\n          left = 120,\n          shadowCol = \"blue\",\n          fontSize = 20,\n          fontWeight = \"bold\",\n          lineHeight = 3\n          )\n)\nserver \u003c- function(input, output) {}\n\nshinyApp(ui = ui, server = server)\n\n```\n\n![](man/figures/example6.gif)\n\nHere also, we can use the `fabric_text_add()` function to incorporate a text object within a canvas element: \n\n\n\n```{r, eval=FALSE}\n\nlibrary(shiny)\nlibrary(fabricerin)\n\n\nui \u003c- fluidPage(\n\nfabric_shape(cid = \"canvas123\",\n              cfill = \"lightblue\",\n              cwidth = 1000,\n              shapeId = \"tri1\",\n              shape = \"Triangle\",\n              fill = \"darkblue\"),\n\nfabric_text_add(cid = \"canvas123\",\n                 textId = \"txt1\",\n                 text = \"This is a darkblue Triangle !\",\n                 left = 350\n                 )\n\n                 )\n\nserver \u003c- function(input, output) {}\n\nshinyApp(ui = ui, server = server)\n\n\n```\n\n![](man/figures/example7.png)\n\n\n\n## `fabric_curtail()` Add a background or an overlay image to a canvas\n\n\n\nYou can set an image as a background or as a foreground (overlay) for a canvas as follows: \n\n\u003e Note that due to security reasons, you won't be able to replicate the following example on some images' sources. \n\n\n```{r, eval=FALSE}\n\nui \u003c- fluidPage(\n\n fabric_shape(cid = \"canvas123\",\n              shapeId = \"tri1\",\n              shape = \"Triangle\",\n              fill = \"lightblue\"),\n\nfabric_curtail(cid = \"canvas123\",\n              imgsrc = \"https://st.depositphotos.com/1642482/1904/i/950/depositphotos_19049237-stock-photo-leaf.jpg\",\n              type = \"background\"\n\n              )\n\n)\n\nserver \u003c- function(input, output) {}\n\n\nshinyApp(ui = ui, server = server)\n\n```\n \n\n![](man/figures/example8.png)\n\n\n\n\n## Code of Conduct\n\nPlease note that the fabricerin project is released with a [Contributor Code of Conduct](https://contributor-covenant.org/version/2/0/CODE_OF_CONDUCT.html). By contributing to this project, you agree to abide by its terms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeddelegrand7%2Ffabricerin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffeddelegrand7%2Ffabricerin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeddelegrand7%2Ffabricerin/lists"}